Vue tab切换内容变化效果

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

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

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

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

@click="cur=0"

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

Tab导航部分内容:

<div>
    <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>
</div>

在data中定义默认值cur=0

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