Vue3手册译稿 - 基础 - Class和Style绑定
还有一个数据绑定就是控制元素的样式表或内联样式。因为它们都是属性，所以我们可以通过v-bind来处理：使用表达运算得到一个最终的字符串。但是字符串拼接是容易混乱和出错的。因为这个原因，Vue在使用v-bind绑定class和style时提供了增强方法。除了字符串，表达式同时也可能运算得到对象和数组。
绑定 HTML Classes
对象语法
我们可以给:class（v-bind:class的缩写）传递一个对象用来动态控制元素的样式：
<div :class="{ active: isActive }"></div>
这段意思是这个div的样式是否为active取决于布尔值isActive是否为真。你可以在元素上写上多个字段来使用元素有多个样式。另外:class可以与静态的class同时存在。看下面的模板：
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
使用下面的数据：
data() {
return {
isActive: true,
hasError: false
}
}
最终可能渲染为：
<div class="static active"></div>
isActive和hasError更新，元素的样式也随之更新。比如hasError变更为true，则最终渲染为：
<div class="static active text-danger"></div>
对象绑定不能是内联样式：
<div :class="classObject"></div>
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
渲染结果是一样的。我们同时也可以绑定一个返回对象的计算属性。这是比较常用且强大的方法：
<div :class="classObject"></div>
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组语法
我们可以传递一个数组给:class，这样元素就可以有一个样式列表：
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
渲染结果：
<div class="active text-danger"></div>
我们也可以根据条件控制样式是否包含在样式列表中，可以使用三元表达式：
<div :class="[isActive ? activeClass : '', errorClass]"></div>
errorClass始终存在，activeClass则取决于isActive是否为真。
但如果有多个条件判断的话就会显得有点繁琐，这就是为什么要使用数组语法：
<div :class="[{ active: isActive }, errorClass]"></div>
组件样式
这个章节假设你已经了解组件了，如果有问题请先跳过，学习组件后来来学习。
如果你将class属性应用到只有一个根元素的定制组件上，样式将被加到这个根元素上。根元素上的样式将不会被覆盖。
例如，你这样声明了一个组件：
const app = Vue.createApp({})
app.component('my-component', {
template: `<p class="foo bar">Hi!</p>`
})
使用时又添加了一个结样式：
<div id="app">
<my-component class="baz boo"></my-component>
</div>
渲染结果如下：
<p class="foo bar baz boo">Hi</p>
样式绑定也是一样：
<my-component :class="{ active: isActive }"></my-component>
如果isActive为真，则渲染的HTML为：
<p class="foo bar active">Hi</p>
如果你的组件有多个根元素，你需要指定哪个根元素会使用该样式。你可以使用组件属性$attrs来完成(定义组件时用)：
<div id="app">
<my-component class="baz"></my-component>
</div>
const app = Vue.createApp({})
app.component('my-component', {
template: `
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
`
})
你可以通过非继承属性章节来了解更多组件样式。
绑定内联样式
对象语法
对象语法直接使用:style。除了是JavaScript对象以外，其他跟CSS都很像。样式名称，你可以使用驼峰命名或土耳其命名（短横线分隔）：
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
直接绑定样式对象有时候也不失为一个好的选择：
<div :style="styleObject"></div>
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
对象语法会结合返回对象的计算属性一起使用。
数组语法
:style的数组语法允许在一个元素上绑定多个样式。
<div :style="[baseStyles, overridingStyles]"></div>
自动前缀
如果你看到:style中一个样式需要浏览器前缀，例如：transform，Vue会自动检测当前浏览器并添加正确的前缀。
多值
你可以添加含有多样式（自动前缀）的数组到:style中，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
只会渲染最后一个当前浏览器支持的样式。在这个示例中，只会渲染display:flex输出非自动前缀版本流式布局到浏览器。
