v-show

vue實現(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'>
    /*你的手機點餐內容*/
    </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的循環(huán)的好處在于可以使用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>

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

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

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