vue实现tab切换组件的效果

clipboard.png

clipboard.png

clipboard.png

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

回答:

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>

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

回答:

v-show

回答:

给你推荐一个基于Vue的组件,ElementUI,官网地址:http://element-cn.eleme.io/2….

这个可以按需引入的,若不想使用扩展组件,你再评论区留言,我再写一个demo给你演示一下

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注