让我们跟着案例的注释来了解吧。。。
<div class="app">
<ul>
<li v-for='book of books'
/*给按钮添加点击事件,点击切换*/
@click='name_big=book'
/*给按钮添加激活样式*/
:class="[name_big==book?'name_se':'']"
>{{book}}</li>
</ul>
<!--失活的组件将会被缓存-->
<keep-alive>
<!--
选项卡效果可以通过 Vue 的 <component> 元素加一个特殊的 is 特性实现(
组件在:is='name_big'中的name_big发生改变时变化)
-->
<component :is='name_big' ></component>
</keep-alive>
</div>
<script>
/*组件同样可以实现选项卡嵌套*/
Vue.component('home',{
template:`<div>
<ul>
<li v-for='item of items'
@click='child_big=item'
:class="[child_big==item?'child_se':'']"
>{{item}}</li>
</ul>
<component :is='child_big' ></component>
</div>`,
data(){
return {
child_big:'top',
items:['top','nr','flooer']
}
}
})
Vue.component('top',{
template:`<div>首页头部</div>`
})
Vue.component('nr',{
template:`<div>首页中部</div>`
})
Vue.component('flooer',{
template:`<div>首页底部</div>`
})
Vue.component('JS',{
template:`<div>公司介绍</div>`
})
Vue.component('DZ',{
template:`<div>公司地址</div>`
})
Vue.component('HJ',{
template:`<div>公司环境</div>`
})
Vue.component('YJ',{
template:`<div>公司意见</div>`
})
var app = new Vue({
el:'.app',
data:{
name_big:'home',
books:['home','JS','DZ','HJ','YJ']
}
})
</script>