在开发过程中，我们经常会遇到动态添加类名或直接修改内联样式（例如 tab 切换）。
class 和 style 都是 DOM 元素的 attribute，我们当然可以直接使用 v-bind 对这两个属性进行数据绑定，例如 <p v-bind:style='style'><p>，然后通过修改 vm.style 的值对元素样式进行修改。但这样未免过于繁琐而且容易出错，所以 Vue.js 为这两个属性单独做了增强处理，表达式的结果类型除了字符串之外，还可以是对象和数组。本小节就会对这两个属性具体的用法 进行说明。
class 属性绑定
首先说明的是 class 属性，我们绑定的数据可以是对象和数组，具体的语法如下:
1 对象语法:v-bind:class 接受参数是一个对象，而且可以与普通的 class 属性共存。
<div class="tab" v-bind:calss="{'active' : active , 'unactive' : !active}"> </div>
vm 实例中需要包含 data : {
active : true }
渲染结果为:<div class="tab active"></div>
2 数组语法:v-bind:class 也接受数组作为参数。
<div v-bind:class="[classA, classB]"></div> vm 实例中需要包含
data : {
classA : 'class-a',
classB : 'class-b' }
渲染结果为:<div class="class-a class-b"></div>。
也可以使用三元表达式切换数组中的 class，<div v-bind:class="[classA, isB ? classB : '']"></div>。如果 vm.isB = false, 则渲染结果为 <div v-bind:class="class-a"></div>。 2.内联样式绑定
style 属性绑定的数据即为内联样式，同样具有对象和数组两种形式: 1 对象语法:直接绑定符合样式格式的对象。
<div v-bind:style="alertStyle"></div> data : {
alertStyle : {
-
color : 'red',
-
fontSize : '20px' }
}除了直接绑定对象外，也可以绑定单个属性或直接使用字符串。
<div v-bind:style="{ fontSize : alertStyle.fontSize, color : 'red'}"></div>
2 数组语法:v-bind:style 允许将多个样式对象绑定到统一元素上。
<div v-bind:style="[ styleObjectA, styleObjectB]" .></div>
3.自动添加前缀
在使用 transform 这类属性时，v-bind:style 会根据需要自动添加厂商前缀。:style 在 运行时进行前缀探测，如果浏览器版本本身就支持不加前缀的 css 属性，那就不会添加。