欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现tab选项卡

程序员文章站 2022-07-23 21:43:49
Tabs {{tab.type}} ......
<!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>