vue实现tab切换组件的效果

Question

vue如何实现这种 切换过程中展现不同的组件 或者 界面

Answer 1

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>

具体路径名根据你的需要自己配置。然后把对应的组件写进路由就好了。当然啦也可以用动态路由实现。