Vuejs选项卡案例

css

.active {
color: red;
border-bottom: 1px solid red;
}
ul li {
padding: 0 15px;
float: left;
list-style: none;
}

html

<div id="root">
<ul>
<li @click="toggle(index,tab.view)" v-for="(tab,index) in tabs" :class="{active: active == index}" :key='index'>{{ tab.type }}</li>
</ul>
<br>
<component :is="currentView"></component>

</div>

 

js

Vue.component("child1", {
template: '<p>hell child1</p>'
})
Vue.component("child2", {
template: '<p>hell child2</p>'
})
new Vue({
el: '#root',
data: {
currentView: 'child1',
active: 0,
tabs: [{
type: 'child1 tab',
view: 'child1'
}, {
type: 'child2 tab',
view: 'child2'
}]
},
methods: {
toggle(i, v) {
this.active = i;
this.currentView = v
}
}
})