Class 与 Style 绑定——Vue 学习笔记（五）

Class 绑定

（1）字符串方法绑定

---

（2）对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

---

同时，v-bind:class 指令也可以与普通的 class attribute 共存，例如：

---

绑定的数据对象不必内联定义在模板里：

效果和上面的例子一模一样。

---

我们也可以在这里绑定一个返回对象的计算属性：

依旧可以正常运行。

---

（3）数组语法：

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

数组语法仍然可以与普通的 class attribute 共存。

---

在数组语法中也可以使用对象语法：

结果和上面的例子一模一样。

---

Style 绑定

（1）对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

---

直接绑定到一个样式对象通常更好，这会让模板更清晰：

效果和上面的一样。

---

同样的，对象语法常常结合返回对象的计算属性使用。

---

（2）数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

---

（3）多重值

从 2.3.0 起可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。