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将显示。
所有评论(0)