对象语法
- 给
:class绑定对象，对象可以有多个键值对。
<div :class="{ active: isActive}"></div>
-
:class可以和普通class并存。
<div class="static" :class="{ active: isActive}"></div>
- 绑定数据中的一个对象。
<div :class="classObject"></div>
data: {
classObject: {
active: true
}
}
- 计算属性
<div :class="classObject"></div>
data: {
isActive: true
},
computed: {
classObject: function () {
return {
active: this.isActive
}
}
}
数组语法
- 绑定数组
<div :class="['active', 'error']"></div>
- 三元表达式
<div :class="[isActive ? 'active' : '']"></div>
- 对象数组
<div :class="[{isActive: 'active'}, 'error']"></div>
组件
active将被添加到组件的根元素上。
<my-component class="active"></my-component>
<my-component :class="{isActive: active}"></my-component>
绑定内联样式
css属性名可以用驼峰式(camelCase) 或 (配合引号的)短横分隔命名(kebab-case)
