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导航部分内容:

    
"cur=0" :class="{active:cur==0}" >全部
    
"cur=1" :class="{active:cur==1}" >好评
    
"cur=2" :class="{active:cur==2}" >差评
复制代码

在data中定义默认值cur=0

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

对应显示的内容：

"show">
    
"topnav-show" v-show="cur==0">
        
内容1
    
    
"topnav-show" v-show="cur==1">
        
内容2
    
    
"topnav-show" v-show="cur==2">
        
内容3
    
复制代码

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