1、动态绑定 class 的方法之对象语法：
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
你也可以在对象中传入更多属性来动态切换多个 class，v-bind:class 指令也可以与普通的 class 属性共存，
<div class="static" v-bind:class="{ active: isActive,error: isError }"></div>
我们也可以在这里绑定一个返回对象的计算属性，这是一个常用且强大的模式：
<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'
}
}
}
2、动态绑定 class 的方法之数组语法：
当需要使用多个 class 时，我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
如果想根据条件切换列表中的 class，可以用三元表达式或者在数组语法中使用对象语法：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> // 三元表达式
<div v-bind:class="[{ active: isActive }, errorClass]"></div> // 数组中的对象语法
当然也可以绑定一个计算属性：
<p :class="classes"></p>
data:{
size:'large',
disabled:true
},
computed:{
classes:function(){
return[
'btn',
{
['btn-' + this.size]:this.size !== '',
['btn-disabled']:this.disabled
}
]
}
}
3、当在一个自定义组件上使用 class 或 :class 属性时，这些类将被添加到该组件的根元素上面，这个元素上已经存在的类不会被覆盖，当要给具体的子元素设置类名时，应当使用组件的 props 来传递。
4、使用 v-bind:style（即 :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，css 属性名称要使用驼峰命名或短横线分隔命名（记得用单引号括起来）。
