CLASS与CSS的绑定

CLASS与CSS的绑定

动态方归纳

直接绑定->数组语法

变量为属性/类名本身,通过改变变量来动态的改变属性值,适用于属性值不确定的场合

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

间接绑定(判断性绑定)->对象语法

属性/类名与变量为键值对形式,变量为布尔值,变量仅决定属性是否存在,不能改变属性本身,适用于明确属性值的增加和去除

v-bind:class="{ active: isActive, 'text-danger': hasError }"

data: {
  isActive: true,
  hasError: false
}

格式归纳

单独变量绑定

绑定变量(直接绑定中的属性值,数组中的项),将对象与数组直接写在绑定位置,data中定义对象或者数组中的变量内容

上方举例皆为单独变量的绑定

(数组/对象)整体绑定

绑定数组/对象,绑定位置放置一个变量,该变量在data中或computer中直接定义为对象/数组,更具动态化,变量具有整体性

下为对象整体绑定示例,数组的整体绑定与对象相同

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组&对象混用

数组与对象语法可混用

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

组件的类

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。
这个元素上已经存在的 class 不会被覆盖。