vue动态绑定class,tab切换非常好用

最新推荐文章于 2025-09-15 13:45:49 发布

原创最新推荐文章于 2025-09-15 13:45:49 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

vue属性专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Vue.js中使用动态绑定class实现Tab切换效果，通过v-bind:class指令结合条件判断，轻松切换不同的样式状态，达到Tab栏目的高亮效果。

<div 
	 @click="tab('left')" 
	 v-bind:class="{'decoration-line':showLeft}" 
	 class="col-xs-6 col-md-6 text-center theme-color item"
>
	排班信息 
</div> 
<div
	 @click="tab('right')" 	
	 v-bind:class="{'decoration-line':showRight}" 	
	 class="col-xs-6 col-md-6 text-center item"
> 
 医生简介 
 </div>

data() {
  return {
    showLeft : true,
    showRight : false
  }
},

tab(type) {
  if (type === 'left'){
    this.showLeft = true
    this.showRight = false
  }else{
    this.showLeft = false
    this.showRight = true
  }
}