VUE中实现Tab切换方式,需要用到以下知识点:

1、动态绑定class,用于导航高亮显示

:class="{active:cur==0}"复制代码

2、click点击事件,用于改变当前cur的值

@click="cur=0"复制代码

3、使用v-show="cur==0",用于判断当前cur的值为0时,显示,也就是点击那个导航,改变cur的值,对应的内容也将显示出来。


Tab导航部分内容:

<ul>
    <li @click="cur=0" :class="{active:cur==0}" ><span>全部</span></li>
    <li @click="cur=1" :class="{active:cur==1}" ><span>好评</span></li>
    <li @click="cur=2" :class="{active:cur==2}" ><span>差评</span></li>
</ul>复制代码

在data中定义默认值cur=0

data(){
    return{
        cur:0,
    }
}复制代码

对应显示的内容:

<div class="show">
    <ul class="topnav-show" v-show="cur==0">
        <li>内容1</li>
    </ul>
    <ul class="topnav-show" v-show="cur==1">
        <li>内容2</li>
    </ul>
    <ul class="topnav-show" v-show="cur==2">
        <li>内容3</li>
    </ul>
</div>复制代码

以上代码可以理解为,当我点击好评时,cur的值=1,动态class将绑定好评高亮显示,对应show部分,内容2将显示。


Logo

前往低代码交流专区

更多推荐