04、Class 与 Style 绑定

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

---

绑定 HTML class=》：class

绑定对象

:class 指令也可以和一般的 class attribute 共存。

渲染的结果：

如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：

可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

 

绑定数组

给 :class 绑定一个数组来渲染多个 CSS class：

想在数组中有条件地渲染某个 class，你可以使用三元表达式：

 

可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象 

在组件上使用

对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上，并与该元素上已有的 class 合并。

声明了一个组件名叫 MyComponent

在使用时添加一些 class渲染出的 HTML 为：

Class 的绑定也是同样的：

 当 isActive 为真时，被渲染的 HTML 会是：

注意：如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来实现指定：

被渲染为

可以在透传 Attribute 一章中了解更多组件的 attribute 继承的细节。【这里还没进行掌握】

---

---

---

绑定内联样式 =>:style

绑定对象

直接绑定一个样式对象

如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性

绑定数组

绑定一个包含多个样式对象的数组

自动前缀

在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。

样式多值

可以对一个样式属性提供多个 (不同前缀的) 值