#### 理解 v-bind几乎可以绑定所有的属性，但是很常用的一种就是动态绑定class类style样式。 #### 动态绑定class v-bind动态绑定class有三种语法：字符串语法、数组语法、对象语法，注意动态class和静态class不要一起使用，虽然可以，但是会出现‘一闪而过’的效果，因为静态样式渲染比动态样式更快: ```js 不推荐，动态class和静态class一起使用了：

这里的box f1 c1 都是已经定义好的类名 ``` ##### 字符串语法：在使用字符串语法动态绑定class时，推荐使用模板字符串，因为使用模板字符串可以直接使用已经定义好的类名，如果使用的是普通字符串，这个时候写的类名会被当作响应式变量。 ```js

动态的class样式（字符串拼接语法）

这里的box f1 都不是响应式变量，是已经定义的类名，因为这里使用了模板字符串 ``` ##### 对象语法：对象语法只需要注意一点：对象属性名是类名，对象属性值是布尔值 ```js

动态的class样式（对象语法）

这里的c1 f1都是响应式变量，它们的值都是style标签里面已经定义好的类名

动态的class样式（对象语法）

这里的c2 f3都是类名，而不是响应式变量抓住本质：对象语法属性名是类名，属性值是布尔值 ``` ##### 数组语法：数组语法同样只抓住一点：数组中每个元素的值都是一个表达式，这个表达式的返回值必须是一个已经定义好的类名 ```js

动态的class样式（数组语法）

这里c1 f1 是响应式变量，但是它们的值，都是style里面定义好的类名，而f3是style里面定义好的类名. 抓住一点，每个元素都是一个表达式，每个表达式都必须返回一个已经定义好的类名. ``` #### 动态绑定style： ##### 字符串语法：(不常用) ```js

动态绑定style字符串语法

//建议使用模板字符串 ``` ##### 对象语法：记住一点：对象语法中：属性名都是css样式名，属性值都是css样式值 ```js

动态绑定style对象语法

c1 fs 都是data中的声明式变量 ``` ##### 数组语法：记住一点: 数组语法中每个元素都是一个对象语法 ```js

动态绑定style数组语法

数组语法中数组的每个元素都是一个对象语法里面的属性名可以加引号也可以不加，属性值不加引号会被当作变量， fs就是一个响应式变量。 ```` #### 总结每种用法都很灵活，记住每种用法的本质。就能灵活变通