vue 实现多个tab切换显隐

Posted 2020-11-23 fanggeque

 

 

 

 

 

实现效果如上图：实现tab切换显隐

 

 1 <template>
 2   <div id="app">
 3     <ul>
 4       <li v-for="(tab,index) in tabs" @click="toggle(index,tab.view)" :class="{active:active==index}">
 5         {{tab.type}}
 6       </li>
 7     </ul>
 8     <!--:is实现多个组件实现同一个挂载点-->
 9     <component :is="currentView"></component>
10   </div>
11 </template>
12 
13 <script>
14   import tab1 from ‘./components/tabs/tab1.vue‘
15   import tab2 from ‘./components/tabs/tab2.vue‘
16   export default {
17     name: ‘app‘,
18     data(){
19       return {
20         active:0,
21         currentView:‘tab1‘,
22         tabs:[
23           {
24             type:‘tab1‘,
25             view:‘tab1‘
26           },
27           {
28             type:‘tab2‘,
29             view:‘tab2‘
30           }
31         ]
32       }
33     },
34     methods:{
35       toggle(i,v){
36         this.active=i;
37         this.currentView=v;
38       }
39     },
40     components:{
41       tab1,
42       tab2
43     }
44   }
45 </script>
46 
47 <style>
48   #app {
49     font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
50     -webkit-font-smoothing: antialiased;
51     -moz-osx-font-smoothing: grayscale;
52     /* text-align: center;
53     color: #2c3e50;
54     margin-top: 60px; */
55   }
56   ul{
57     width:200px;
58     display:flex;
59   }
60   ul li{
61     width:100px;
62     height:40px;
63     background: #ccc;
64     display: inline-flex;
65     border-right:1px solid #ddd;
66     justify-content: center;
67     align-items: center;
68     cursor:pointer
69   }
70   ul li.active{
71     background:#333;
72   }
73 </style>