vue实现tab切换组件的效果

Question

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

Answer 1

vue实现tab切换可以使用v-for循环和vue-router。先来说说v-for循环template部分如下：&nbsp; <ul class="nav">&nbsp; &nbsp; &nbsp; &nbsp; <li v-for="(item,index) in navlist" :class="{active:!(index-menuIndex)}"&nbsp; @click='menuShow(index)' ><a href="#"&nbsp; v-text="item" ></a></li>&nbsp; &nbsp; </ul>&nbsp; &nbsp; <div v-show='menuIndex=0'>&nbsp; &nbsp; /*你的手机点餐内容*/&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-show='menuIndex=1'>&nbsp; &nbsp; /*你的手机外卖内容*/&nbsp; &nbsp; </div>&nbsp; &nbsp; <div v-show='menuIndex=2'>&nbsp; &nbsp; /*你的网络预订内容*/&nbsp; &nbsp; </div>script部分如下：&nbsp;data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; menuIndex: -1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; navlist: ['手机点餐', '手机外卖', '网络预订'],&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; menuShow: function (index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.menuIndex = index&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;使用v-for的循环的好处在于可以使用index获取所点击内容。这时你可以如果你使用vue-router呢就是把这几个部分写成三个组件，然后vue路由定义template部分如下：<ul class="nav">&nbsp; &nbsp; <li v-for="(item,index) in navlist" :class="{active:!(index-menuIndex)}" ><router-link :to="{path:'\index'+index}" ></router-link></li></ul>具体路径名根据你的需要自己配置。然后把对应的组件写进路由就好了。当然啦也可以用动态路由实现。