Vue-tab选项卡

<div id='test'>
<ul class="nav" >
<li v-for='(item,index) in dataNav' @click='tabClick(item,index)' :class='{active:actives==index}'>{{item}}</li>
</ul>
<div>
<component :is='view'></component>
</div>
</div>

 

var test1 = Vue.component('test1',{
template:'<p>test1</p>'
})
var test2 = Vue.component('test2',{
template:'<p>test2</p>'
})
var test3 = Vue.component('test3',{
template:'<p>test3</p>'
})
var test4 = Vue.component('test4',{
template:'<p>test4</p>'
})
var test = new Vue({
el:'#test',
data:{
dataNav:[
'test1',
'test2',
'test3',
'test4'
],
actives:0,
view:'test1'
},
components:{
test1:test1,
test2:test2,
test3:test3,
test4:test4
},
methods:{
tabClick:function(val,index){
this.actives = index;
this.view = val;
}
}
})

 

转载于:https://www.cnblogs.com/huangmin1992/p/7027698.html