vue tab切换demo

定义tab页面切换的内容

var app=new Vue({
 
el:'#app',
 
data:{
 
navTabs:[
{
text:"tab1",
isActive:true,
tabContent:'this is tab1 content'
},
{
text:"tab2",
isActive:false,
tabContent:'this is tab2 content'
},
{
text:"tab3",
isActive:false,
tabContent:'this is tab3 content'
},
]
 
}
 
});

定义组件

/*tabTitle的组件*/
Vue.component('tab-title',{
props:['title'],
template:'<li v-on:click="$emit(\'change\')">{{title}}</li>'
})
/*tabContent的组件*/
Vue.component('tab-content',{
props:['content'],
template:'<div>{{content}}</div>'
})

使用

<ul class="navTab">
       <li v-for="(navTab,index) in navTabs"  is="tab-title" v-bind:class="{active:navTab.isActive}"
     v-on:change="switchTab(index)" v-bind:title="navTab.text"></li>
 </ul>
 <div class="tabContent">
     <div v-for="tabContent in navTabs" v-if="tabContent.isActive" is="tab-content"  v-bind:content="tabContent.tabContent"></div>
  </div>