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

最新推荐文章于 2024-04-12 09:30:00 发布

H_c_l

最新推荐文章于 2024-04-12 09:30:00 发布

阅读量937

点赞数

分类专栏： vue属性

本文链接：https://blog.csdn.net/H_c_l/article/details/91955532

版权

vue属性专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

<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
  }
}