VUE实现Tab切换-优快云博客

博客介绍了VUE中实现Tab切换的方式，涉及动态绑定class实现导航高亮、click点击事件改变cur值，以及用v - show根据cur值显示对应内容。如点击好评，cur值变为1，好评导航高亮，对应内容显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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将显示。