Vue实现tab选项卡

2018-06-24 01:59:59来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tabs</title>
    <style>
       .active{
            background: #f00;
       }
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>        
        <li @click="toggle(index ,tab.view)" v-for="(tab,index) in tabs" :class="{active:active===index}">
              {{tab.type}}       
         </li>    
    </ul>   
   <component :is="currentView"></component>
</div>

</body>
</html>
<script>
    Vue.component('child1', { 
        template: "<p>this is child1</p>"
    })
    Vue.component('child2', { 
        template: "<p>this is child2</p>"
    })
    new Vue({ 
        el: "#app", 
        data: {   
            active: 0, 
            currentView: 'child1',   
            tabs: [   
                {       
                    type: 'tab1',   
                    view: 'child1'  
                },     
                {       
                    type: 'tab2',    
                    view: 'child2'    
                }  
            ]  
        }, 
        methods: {  
            toggle(i, v){    
                this.active = i   
                this.currentView = v  
            } 
        }
    })
</script>

 演示地址: https://xibushijie.github.io/static/vuetab.html

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js实现分享到QQ

下一篇:electron应用以管理员权限启动