Vue实现tab选项卡

时间：2020-12-21 06:30:12
<!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

标签：

相关文章