3. vue中的class和style的动态绑定

1. 动态绑定class

* 对象方式处理
1. 直接写在结构上
* 语法 -- :class = " { 样式类名，响应式数据 } " 当响应式数据为TRUE的时候，才会有这个样式
* 例子：`

Ananiah

data() {
return {
isActive: true
};
},
// 渲染dom 结果

Ananiah

* 注意 -- v-bind:class 指令也可以与普通的class共存 2. 写在响应式数据中 * 语法 -- :class = " 响应数据(对象) " * 例子：

Ananiah

data() {
return {
classObj: {
active: true,
'text-danger': true
}
};
},
* 渲染结果： <div class="active text-danger"> Ananiah </div> 3. 写在计算属性中 * 语法 -- :class=" 返回的是对象的计算属性 " * 例子：

Ananiah

computed: {
classObject: function() {
return {
active: this.isActive && !this.error
}
}
},
* 数组控制样式类 1. 语法 -- :class=" [ 响应式数据1, ... ] " -- 控制响应式数据的值是对应的样式类或者没有值，来控制是否有这个样式 2. 例子 --

Ananiah

data() {
return {
activeClass: "active",
errorClass: "text-danger"
};
},
`
3. 渲染结果：

Ananiah

4. 注意：
* 1. 如果想根据条件切换列表中的class，可以用三元表达式

Ananiah

* 2. 在数组语法中也可以使用对象语法

Ananiah

控制style样式

* 与控制动态class类名基本一致
* 注意 -- 可以用驼峰式( camelCase )或者短横线( kebab-case )分割来命名