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 不会被覆盖。