Vue动态绑定class

Vue动态绑定class以及标签属性中插入变量参数总结

点击动态添加class

<div :class="{'active':item.show===true}></div>

动态地切换 class：

<div :class="{ active: isActive }"></div>
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
 export default {
    data: {
      isActive: true,
      hasError: false
    }
 }

绑定一个返回对象的计算属性动态更改class

<div :class="classObject"></div>
 export default {
   data: {
     fullscreen:false;
   },
   computed: {
     classObject: function () {
       return {
           'fullscreen': this.isFullscreen == false,
           'noFullscreen':this.isFullscreen == true,
       }
     }
   }
 }

数组语法

<div :class="[activeClass, errorClass]"></div>
 export default {
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
 }

• 渲染为

  三元表达式 根据条件切换列表中的 class，

  <div :class="[isActive ? 'activeClass' : '']"></div>

• isActive为true的时候添加 activeClass 否则 ‘’
• 也可以直接加多个class

  ```bash
  <div :class="[item.icon,isActive ? 'activeClass' : '']"></div>

  ### vue如何在标签属性中插入变量参数
  ```bash
  <component :is="item.bar" :style="{'height': item.height + 'px'}"></component>
  <component :is="item.bar" :style="'height:'+item.height+'px'"></component>

赏

谢谢你请我吃糖果

支付宝

微信