绑定class
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：
例如：<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': i%2===0}"></div>
如果isA=true，class-a绑定 ；其中i%2===0表示类型和值必须完全一致，i%2==0表示值相等就可以
数组语法
<div v-bind:class="[classA, classB]">
data:{
classA: 'class-a',
classB: 'class-b'
}
渲染为：<div class="class-a class-b"></div>
也可以用三元运算符：
<div v-bind:class="[classA, isB ? classB : '']">
可以在数组中使用对象：
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
如果isB=true，结果为<div class="classA classB">
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
直接绑定到一个样式对象通常更好，让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上
<div v-bind:style="[styleObjectA, styleObjectB]">