vue实现动态class

总结一下,vue实现动态class主要通过以下三种方式

1 通过对象方式

动态绑定一个类名的写法
:class="{ 'on': ifOn }"

动态绑定多个类名的写法
:class="{ 'on': ifOn, 'disabled': ifDisabled }"

如 ifOn / ifDisabled 都是vue的变量，为真则对应key的class类名生效

当动态class类名过多/条件判断过于复杂，可通过定义变量/使用computed属性来实现

定义变量方式

:class="classConfig"
data() {
  return {
    classConfig:{ on: true, disabled: false }
  }
}

computed属性方式

data() {
  return {
    on: true,
    disabled: false
  }
}

computed: {
  classConfig: function () {
    return {
      on: this.on,
      disabled: this.disabled
    }
  }
}

2 通过数组方式

通过变量直接绑定
:class="[className1, className2]"
data() {
  return{
    className1:'className1',
    className2:'className2'
 }
}

通过三元表达式条件判断
单个
:class="[ifOn ? 'on' : 'not-on' ]"
多个
:class="[ifOn ? 'on' : 'not-on', ifDisabled ? 'disabled' : 'not-disabled' ]"

3 通过数组+对象嵌套方式

:class="[{ 'on': ifOn }, 'disbaled']"

4 总结

对象方法主要通过

{'className': Boolean}

Boolean为vue内部定义的变量，为真则生效

数组方法主要通过

[Boolean? 'className1': 'className2' ]

Boolean为vue内部定义的变量，为真则className1生效，反之则className2生效

两者结合主要是数组内嵌对象格式

className需要加引号