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

谁践踏了优雅 2022-01-15 00:25 439阅读 0赞 
  1. <div @click="tab('left')" v-bind:class="{ 'decoration-line':showLeft}" class="col-xs-6 col-md-6 text-center theme-color item" >
  2.     排班信息 
  3. </div> 
  4. <div @click="tab('right')" v-bind:class="{ 'decoration-line':showRight}" class="col-xs-6 col-md-6 text-center item" > 
  5.  医生简介 
  6.  </div>
  8. data() { 
  9.   return { 
  10.     showLeft : true,
  11.     showRight : false
  12.   }
  13. },
  15. tab(type) { 
  16.   if (type === 'left'){ 
  17.     this.showLeft = true
  18.     this.showRight = false
  19.   }else{ 
  20.     this.showLeft = false
  21.     this.showRight = true
  22.   }
  23. }

发表评论

表情：
评论列表 （有 0 条评论，439人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 动态样式绑定

    1. 简介 本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

    迈不过友情╰迈不过友情╰/ 0 赞/ 150 阅读

    相关 vue动态绑定class

    Vue.js 允许您使用 v-bind 指令或简写的 : 来动态绑定 class 属性。这允许您基于某些条件为元素添加或删除类名，从而实现动态样式控制。以下是一些示例： 动态

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 79 阅读

    相关 【vue系列】class动态绑定

    > 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串

    Bertha 。Bertha 。/ 0 赞/ 441 阅读