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>

 

posted on 2017-05-23 10:03  半夏微澜ぺ  阅读(5543)  评论(1编辑  收藏  举报