vuejs利用動(dòng)態(tài)組件實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡 (1.0版本)
最近也在學(xué)習(xí)vuejs,并且手上一個(gè)項(xiàng)目也用到了這個(gè)框架,今天介紹一個(gè)簡(jiǎn)單實(shí)現(xiàn)tabs選項(xiàng)卡切換的方法鱼的。
1. 嵌套路由實(shí)現(xiàn)
<ul>
<li v-link="{ path: '/class/child1'}">child1 tab</li>
<li v-link="{ path: '/class/child2'}">child2 tab</li>
<router-view></router-view>
</ul>
這個(gè)不是今天要重點(diǎn)記錄的,略過(guò)啦-,-
2. 利用vuejs的動(dòng)態(tài)組件實(shí)現(xiàn),官網(wǎng)介紹 http://vuejs.org.cn/guide/components.html#動(dòng)態(tài)組件
html:
<div id="root">
<ul>
<li @click="toggle($index,tab.view)" v-for="tab in tabs" :class="{active: active == $index}">{{ tab.type }}</li>
</ul>
<br>
<component :is="currentView" ></component>
</div>
script:
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
}
}
css:
.active {
color: red;
border-bottom: 1px solid red;
}
ul li {
padding: 0 15px;
float:left;
list-style: none;
}
在線預(yù)覽: https://jsfiddle.net/2kn4hqts/
Good night !
