6. Class and Style Bindings（类和样式绑定）
数据绑定的常见需求是操作元素的类列表及其内联样式。既然它们都是属性，我们可以用它v-bind来处理它们：我们只需要用我们的表达式计算最终的字符串。但是，干涉字符串连接是烦人的并且容易出错。出于这个原因，Vue v-bind与classand一起使用时会提供特殊的增强功能style。除了字符串之外，表达式还可以评估为对象或数组。
绑定HTML类
对象语法
我们可以传递一个对象v-bind:class来动态切换类：
<div v-bind:class="{ active: isActive }"></div>上面的语法意味着active类的存在将由数据属性的真实性决定isActive。
您可以通过在对象中包含更多字段来切换多个类。另外，该v-bind:class指令还可以与普通class属性共存。所以给了以下模板：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>以下数据：
data: {
isActive: true,
hasError: false
}它会渲染：
<div class="static active"></div>何时isActive或hasError更改，class 列表将相应更新。例如，如果hasError变成true，班级列表将变成"static active text-danger"。
绑定对象不必内联：
<div v-bind:class="classObject"></div>data: {
classObject: {
active: true,
'text-danger': false
}
}这将会产生相同的结果。我们还可以绑定到返回对象的计算属性。这是一个常见而强大的模式：
<div v-bind:class="classObject"></div>data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}数组语法
我们可以传递一个数组给v-bind:class来应用一个类的列表：
<div v-bind:class="[activeClass, errorClass]"></div>data: {
activeClass: 'active',
errorClass: 'text-danger'
}这将渲染：
<div class="active text-danger"></div>如果您还希望有条件地切换列表中的类，则可以使用三元表达式进行操作：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>这将始终适用errorClass，但只适用activeClass于isActive的真实情况。
但是，如果您有多个条件类，则这可能有点冗长。这就是为什么可以在数组语法中使用对象语法的原因：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>与组件
本节假定Vue组件的知识。可跳过。
在class自定义组件上使用该属性时，这些类将被添加到组件的根元素。此元素上的现有类将不会被覆盖。
例如，如果你声明了这个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})然后在使用它时添加一些类：
<my-component class="baz boo"></my-component>呈现的HTML将是：
<p class="foo bar baz boo">Hi</p>类绑定也是如此：
<my-component v-bind:class="{ active: isActive }"></my-component>什么时候isActive是真的，呈现的HTML将是：
<p class="foo bar active">Hi</p>绑定内联样式
对象语法
对象语法v-bind:style非常简单 - 它看起来几乎像CSS，除了它是一个JavaScript对象。对于CSS属性名称，您可以使用camelCase或kebab-case（对kebab-case使用引号）：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: {
activeColor: 'red',
fontSize: 30
}直接绑定到样式对象通常是一个好主意，以便模板更清晰：
<div v-bind:style="styleObject"></div>data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}同样，对象语法经常与返回对象的计算属性结合使用。
数组语法
数组语法v-bind:style允许您将多个样式对象应用于相同的元素：
<div v-bind:style="[baseStyles, overridingStyles]"></div>自动前缀
当您使用需要一个CSS属性供应商前缀的v-bind:style，例如transform，Vue会自动检测并添加相应的前缀所应用的样式。
多个值
2.3.0+
从2.3.0+开始，您可以为样式属性提供多个（前缀）值的数组，例如：
<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>这只会呈现浏览器支持的数组中的最后一个值。在此示例中，它将呈现display: flex支持flexbox前缀版本的浏览器。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
