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>