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>