鍍金池/ 問答/HTML/ vue實(shí)現(xiàn)tab切換組件的效果

vue實(shí)現(xiàn)tab切換組件的效果

clipboard.png

clipboard.png

clipboard.png

vue如何實(shí)現(xiàn)這種 切換過程中展現(xiàn)不同的組件 或者 界面

回答
編輯回答
孤巷

v-show

2018年6月20日 03:19
編輯回答
陌離殤

vue實(shí)現(xiàn)tab切換可以使用v-for循環(huán)和vue-router。先來說說v-for循環(huán)

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'>
    /*你的手機(jī)點(diǎn)餐內(nèi)容*/
    </div>
    <div v-show='menuIndex=1'>
    /*你的手機(jī)外賣內(nèi)容*/
    </div>
    <div v-show='menuIndex=2'>
    /*你的網(wǎng)絡(luò)預(yù)訂內(nèi)容*/
    </div>

script部分如下：

 data () {
    return {
            menuIndex: -1,
            navlist: ['手機(jī)點(diǎn)餐', '手機(jī)外賣', '網(wǎng)絡(luò)預(yù)訂'],
        }
    },
    methods: {
        menuShow: function (index) {
            this.menuIndex = index
        }
    }

使用v-for的循環(huán)的好處在于可以使用index獲取所點(diǎn)擊內(nèi)容。這時你可以

如果你使用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>

具體路徑名根據(jù)你的需要自己配置。然后把對應(yīng)的組件寫進(jìn)路由就好了。當(dāng)然啦也可以用動態(tài)路由實(shí)現(xiàn)。

2017年6月28日 09:37
編輯回答
入她眼

給你推薦一個基于Vue的組件，ElementUI，官網(wǎng)地址：http://element-cn.eleme.io/2....

這個可以按需引入的，若不想使用擴(kuò)展組件，你再評論區(qū)留言，我再寫一個demo給你演示一下

2018年9月15日 07:24