Vue的Class 与 Style 绑定
绑定 HTML class#
绑定对象#
我们可以给:class(v-bind:class的缩写) 传递一个对象来动态切换 class：
template
;div:class="{active:isActive}";;/div;上面的语法表示active是否存在取决于数据属性isActive的真假值。
你可以在对象中写多个字段来操作多个 class。此外，:class指令也可以和一般的classattribute 共存。举例来说，下面这样的状态：
js
data(){return{isActive:true,hasError:false}}配合以下模板：
template
;divclass="static":class="{active:isActive,'text-danger':hasError}";;/div;渲染的结果会是：
template
;divclass="static active";;/div;当isActive或者hasError改变时，class 列表会随之更新。举例来说，如果hasError变为true，class 列表也会变成"static active text-danger"。
绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：
js
data(){return{classObject:{active:true,'text-danger':false}}}template
;div:class="classObject";;/div;这也会渲染出相同的结果。我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：
js
data(){return{isActive:true,error:null}},computed:{classObject(){return{active:this.isActive;;.error,'text-danger':this.error;;this.error.type==='fatal'}}}template
;div:class="classObject";;/div;绑定数组#
我们可以给:class绑定一个数组来渲染多个 CSS class：
js
data(){return{activeClass:'active',errorClass:'text-danger'}}template
;div:class="[activeClass,errorClass]";;/div;渲染的结果是：
template
;divclass="active text-danger";;/div;如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：
template
;div:class="[isActive?activeClass:'',errorClass]";;/div;errorClass会一直存在，但activeClass只会在isActive为真时才存在。
然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：
template
;div:class="[{active:isActive},errorClass]";;/div;在组件上使用#
本节假设你已经有Vue 组件的知识基础。如果没有，你也可以暂时跳过，以后再阅读。
对于只有一个根元素的组件，当你使用了classattribute 时，这些 class 会被添加到根元素上，并与该元素上已有的 class 合并。
举例来说，如果你声明了一个组件名叫MyComponent，模板如下：
template
;-- 子组件模板 --;;pclass="foo bar";Hi!</p;在使用时添加一些 class：
template
;-- 在使用组件时 --;;MyComponentclass="baz boo"/;渲染出的 HTML 为：
template
;pclass="foo bar baz boo";Hi;/p;Class 的绑定也是同样的：
template
;MyComponent:class="{active:isActive}"/;当isActive为真时，被渲染的 HTML 会是：
template
;pclass="foo bar active";Hi;/p;如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的$attrs属性来实现指定：
template
;-- MyComponent 模板使用 $attrs 时 --;;p:class="$attrs.class";Hi!</p;;span;This is a child component;/span;template
;MyComponentclass="baz"/;这将被渲染为：
html
;pclass="baz";Hi!</p;;span;This is a child component;/span;你可以在透传 Attribute一章中了解更多组件的 attribute 继承的细节。
绑定内联样式#
绑定对象#
:style支持绑定 JavaScript 对象值，对应的是HTML 元素的style属性：
js
data(){return{activeColor:'red',fontSize:30}}template
;div:style="{color:activeColor,fontSize:fontSize+'px'}";;/div;尽管推荐使用 camelCase，但:style也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：
template
;div:style="{'font-size':fontSize+'px'}";;/div;直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁：
js
data(){return{styleObject:{color:'red',fontSize:'13px'}}}template
;div:style="styleObject";;/div;同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。
绑定数组#
我们还可以给:style绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上：
template
;div:style="[baseStyles,overridingStyles]";;/div;自动前缀#
当你在:style中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。
样式多值#
你可以对一个样式属性提供多个 (不同前缀的) 值，举例来说：
template
;div:style="{display: ['-webkit-box','-ms-flexbox','flex'] }";;/div;数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为display: flex。
