vue如何實現這種 切換過程中展現不同的組件 或者 界面
vue實現tab切換組件的效果
郎朗坤
2019-03-06 17:34:19
2 回答
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
vue實現tab切換可以使用v-for循環和vue-router。先來說說v-for循環
template部分如下：
<ul class="nav">
<li v-for="(item,index) in navlist" :class="{active:!(index-menuIndex)}" @click='menuShow(index)' ><a href="#" v-text="item" ></a></li>
</ul>
<div v-show='menuIndex=0'>
/*你的手機點餐內容*/
</div>
<div v-show='menuIndex=1'>
/*你的手機外賣內容*/
</div>
<div v-show='menuIndex=2'>
/*你的網絡預訂內容*/
</div>
script部分如下：
data () {
return {
menuIndex: -1,
navlist: ['手機點餐', '手機外賣', '網絡預訂'],
}
},
methods: {
menuShow: function (index) {
this.menuIndex = index
}
}
使用v-for的循環的好處在于可以使用index獲取所點擊內容。這時你可以
如果你使用vue-router呢就是把這幾個部分寫成三個組件，然后vue路由定義
template部分如下：
<ul class="nav">
<li v-for="(item,index) in navlist" :class="{active:!(index-menuIndex)}" ><router-link :to="{path:'\index'+index}" ></router-link></li>
</ul>
具體路徑名根據你的需要自己配置。然后把對應的組件寫進路由就好了。當然啦也可以用動態路由實現。
添加回答
舉報
0/150
提交
取消