tab切换功能——vue

项目开发中，使用vue实现tab页签切换功能。具体实例如下：

（1）首先定义子组件，如下图：

以select01.vue为例，子组件的源代码如下：

[plain]  view plain  copy

1. <template>  
2.   <div slot='select01'>{{msg}}</div>  
3. </template>  
4.   
5. <script>  
6. export default {  
7.   data(){  
8.     return{  
9.       msg:"select01"  
10.     }  
11.   }  
12. }  
13. </script>  
14.   
15. <style lang="scss">  
16.   
17. </style>  

（2）在app.vue中将子组件引入，通过v-for实现tab页签，通过@click实现页签切换，通过:class实现绑定当前页，tab切换主要依靠组件component实现，每个页签切换时，不想让改变页签内容，可以用keep-alive实现。具体代码如下：

[plain]  view plain  copy

1. <template>  
2.   <div id="app">  
3.     <div class="radio-wrap">  
4.       <div class="radio-group" v-model="tabView">   
5.         <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))">{{tab.name}}</span>  
6.       </div>  
7.       <div style="margin:10px 0;"></div>  
8.       <keep-alive>   
9.         <component v-bind:is="tabView"></component>  
10.       </keep-alive>   
11.     </div>  
12.   </div>  
13. </template>  
14.   
15. <script>  
16.   import select1 from './components/select01.vue';  
17.   import select2 from './components/select02.vue';  
18.   import select3 from './components/select03.vue';  
19. export default {  
20.   name: 'app',  
21.   data () {  
22.     return {  
23.       tabView: 'select1',  
24.       tabs: [{name: "选项一"}, {name: "选项二"} ,{name: "选项三"}],  
25.       iscur: 0  
26.     }  
27.   },  
28.   components: {  
29.     select1,  
30.     select2,  
31.     select3  
32.   },  
33.   methods: {  
34.     tabChange:function(tab){  
35.       this.tabView = tab;  
36.     }  
37.   }  
38. }  
39. </script>  
40.   
41. <style>  
42.   .radio-group{font-size:0;height: 26px;line-height:26px;}  
43.   .radio-group>span{cursor:pointer;display:inline-block;font-size:16px;text-align:center;width:100px;}  
44.   .cur{color:#fff;background-color: #20a0ff;}  
45. </style>  

（3）功能效果如下：