Vue对DOM元素的class和style两个特性做了专门的增强，即对CSS类和内联样式做了一层封装，通过v-bind指令来处理它们，而接收的表达式既可以是简单的字符串、对象或数组，也可以是复杂的计算属性。不仅如此，Vue还为表单设计了一些语法糖，让表单处理变得尤为简单。

一、CSS类

　　v-bind指令与class参数配合，就能处理CSS类，并且能接收多种类型的值。

1）对象

　　v-bind:class可以接收一个对象，对象的属性名就是CSS类名，只有当其值是真值时，才能添加到DOM元素上，否则会被忽略。下面的<p>元素会接收数据对象中的classList，它包含两个属性warning和cur，其中cur属性保存了一个假值。

<p v-bind:class="classList">strick</p><script>  var vm = new Vue({　     data: {　　       classList: {         warning: true,         cur: ""       }　     }   }); </script>

　　渲染出的<p>元素如下所示，不包含cur类。

<p class="warning">strick</p>

　　此外，v-bind:class可简写成:class，并且能与普通的class特性共存，如下所示。

<p :class="classList" class="size">strick</p>

2）数组

　　当v-bind:class接收一个数组时，其元素既可以是CSS类名，也可以是对象，格式与之前相同，如下所示。

<p :class="[classList, cur]">strick</p><script>  var vm = new Vue({　     data: {　　       classList: {         warning: true       },       cur: "cur"　     }   }); </script>

二、内联样式

　　v-bind指令与style参数配合，就能避免通过字符串拼接的方式来处理内联样式，并且也能接收多种类型的值。

1）对象

　　v-bind:style可以接收一个对象，对象的属性名有两种命名方式：驼峰式和连字符分隔式，第二种就是层叠样式表中的CSS属性的命名方式。下面的<p>元素会接收数据对象中的cssObj，其属性采用了两种命名方式。

<p :style="cssObj">strick</p><script>  var vm = new Vue({　     data: {　　       cssObj: {         "fontSize": "30px",         "line-height": 2       }　     }   }); </script>

　　渲染出的<p>元素如下所示。

<p style="font-size: 30px; line-height: 2;">strick</p>

　　Vue允许为属性赋一个包含多个值的数组（即多重值），可让浏览器选择支持的属性，例如定义不同阶段的伸缩盒样式，如下所示。

<p :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"