vue-Class 与 Style 绑定
vue-Class 与 Style 绑定
- 绑定 HTML class
- 绑定对象
- 绑定数组
- 在组件上使用
- 绑定内联样式
- 绑定对象
- 绑定数组
- 自动前缀
- 样式多值
绑定 HTML class
绑定对象
我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：
上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。
你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：
data() {return {isActive: true,hasError: false}
}绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：
data() {return {classObject: {active: true,'text-danger': false}}
}
我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：
data() {return {isActive: true,error: null}
},
computed: {classObject() {return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}
}
绑定数组
我们可以给 :class 绑定一个数组来渲染多个 CSS class：
data() {return {activeClass: 'active',errorClass: 'text-danger'}
}
如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：
errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。
然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：
在组件上使用
对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上，并与该元素上已有的 class 合并。
举例来说，如果你声明了一个组件名叫 MyComponent，模板如下：
Hi!
在使用时添加一些 class：
渲染出的 HTML 为：
Hi!
Class 的绑定也是同样的：
当 isActive 为真时，被渲染的 HTML 会是：
Hi!
如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来实现指定：
Hi!
This is a child component这将被渲染为：
Hi!
This is a child component绑定内联样式
绑定对象
:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：
data() {return {activeColor: 'red',fontSize: 30}
}尽管推荐使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：
直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁：
data() {return {styleObject: {color: 'red',fontSize: '13px'}}
}
绑定数组
我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上：
自动前缀
当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。
样式多值
你可以对一个样式属性提供多个 (不同前缀的) 值，举例来说：
数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。