# 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
}
}
}
~~~
渲染结果是一样的。我们同时也可以绑定一个返回对象的[计算属性](https://v3.vuejs.org/guide/computed.html)。这是比较常用且强大的方法：
~~~
<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>
`
})
~~~
你可以通过[非继承属性](https://v3.vuejs.org/guide/component-attrs.html)章节来了解更多组件样式。
## 绑定内联样式
### 对象语法
对象语法直接使用```: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`中一个样式需要[浏览器前缀](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)，例如：`transform`，Vue会自动检测当前浏览器并添加正确的前缀。
### 多值
你可以添加含有多样式（自动前缀）的数组到`:style`中，例如：
~~~
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
~~~
只会渲染最后一个当前浏览器支持的样式。在这个示例中，只会渲染`display:flex`输出非自动前缀版本流式布局到浏览器。
