tab切换功能——vue

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

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

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

<template>  <div slot='select01'>{{msg}}</div></template><script>export default {  data(){    return{      msg:"select01"    }  }}</script><style lang="scss"></style>

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

<template>  <div id="app">    <div class="radio-wrap">      <div class="radio-group" v-model="tabView">         <span v-for="(tab ,index) in tabs" :class="{cur:iscur==index}" @click="iscur=index,tabChange('select' + (index + 1))">{{tab.name}}</span>      </div>      <div style="margin:10px 0;"></div>      <keep-alive>         <component v-bind:is="tabView"></component>      </keep-alive>     </div>  </div></template><script>  import select1 from './components/select01.vue';  import select2 from './components/select02.vue';  import select3 from './components/select03.vue';export default {  name: 'app',  data () {    return {      tabView: 'select1',      tabs: [{name: "选项一"}, {name: "选项二"} ,{name: "选项三"}],      iscur: 0    }  },  components: {    select1,    select2,    select3  },  methods: {    tabChange:function(tab){      this.tabView = tab;    }  }}</script><style>  .radio-group{font-size:0;height: 26px;line-height:26px;}  .radio-group>span{cursor:pointer;display:inline-block;font-size:16px;text-align:center;width:100px;}  .cur{color:#fff;background-color: #20a0ff;}</style>

（3）功能效果如下：