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']}">strick</p>

2）陣列

　　當v-bind:style接收一個數組時，其元素就是樣式物件，並且如果出現同名的CSS屬性，那麼後面的會覆蓋前面的。例如下面的cssObj1和cssObj2兩個物件都包含line-height屬性，而最終渲染出的值為1.5。

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

3）瀏覽器字首

　　Vue會自動偵測瀏覽器樣式的相容性，並根據需要為CSS屬性（例如border-radius、transform等）新增相應的瀏覽器字首。

 　　下面的程式碼摘自Vue.js，其中camelize()函式可將連字元分隔式的字串轉換成駝峰式的字串；vendorNames變數記錄了三種瀏覽器字首；normalize()函式會判斷傳入的屬性是否存在於<div>元素的style屬性中，如果不存在，就為其新增瀏覽器字首，而之所以單獨處理filter屬性是因為Chrome的一個bug，雖然Chrome只支援-webkit-filter屬性，但是style屬性中儲存的卻是無字首的filter。

var camelizeRE = /-(\w)/g;
var camelize = cached(function(str) {
  return str.replace(camelizeRE, function(_, c) {
    return c ? c.toUpperCase() : "";
  });
});

var vendorNames = ["Webkit", "Moz", "ms"];
var emptyStyle;
var normalize = cached(function(prop) {
  emptyStyle = emptyStyle || document.createElement("div").style;
  prop = camelize(prop);
  if (prop !== "filter" && prop in emptyStyle) {
    return prop;
  }
  var capName = prop.charAt(0).toUpperCase() + prop.slice(1);
  for (var i = 0; i < vendorNames.length; i++) {
    var name = vendorNames[i] + capName;
    if (name in emptyStyle) {
      return name;
    }
  }
});

三、表單

　　Vue提供了v-model指令，可在表單控制元件上實現雙向資料繫結，即修改控制元件的值，也會自動更新Vue例項中所對應的資料物件的屬性，反之亦然。

1）v-model

　　下面用一個示例來演示v-model指令的用法，文字框的初始值是“strick”，當修改<input>元素中的值時，<p>元素的文字也會隨之更新。

<input type="text" v-model="name"/>
<p>{{name}}</p>
<script>
  var vm = new Vue({　
    data: {　　
      name: "strick"　
    }
  });
</script>

　　而如果在控制檯執行下面這條賦值語句，那麼就會更新<input>元素中的值，其實這就是Vue的雙向資料繫結所起的作用。

vm.name = "freedom";

　　在使用v-model指令時需要注意，表單控制元件的初始值得宣告在資料物件的屬性中，而不是value、checked或selected這些特性中。還是以之前的文字框為例，添加了一個value特性，如下所示，渲染出的控制元件值將是“strick”，而不是“init”。

<input type="text" v-model="name" value="init"/>

　　v-model本質上是個語法糖，它在內部會監聽表單控制元件相關特性的變化，並觸發相應的事件，其對應關係如表4所示。

表4  v-model指令內部的對應關係

2）表單控制元件

　　將v-model指令作用於表單控制元件時，其初始值常用的型別會有所不同，如下所示。

var vm = new Vue({
  data: {
    name: "",          //文字框（單行和多行）
    checked: true,     //一個複選框
    names: [],         //多個複選框
    color: "",         //單選框
    selected: "",      //選擇框（單選）
    selecteds: []      //選擇框（多選）
  }
});

　　當只使用一個複選框時，v-model指令可繫結一個布林值；而當使用多個複選框時，v-model指令適合繫結陣列，如下所示。

<input type="checkbox" v-model="checked" />

<input type="checkbox" value="strick" v-model="names"/>
<input type="checkbox" value="freedom" v-model="names"/>

　　單選框與複選框不同，由於它只能選中一個值，因此不適合繫結陣列，如下所示。

<input type="radio" value="red" v-model="color"/>
<input type="radio" value="black" v-model="color"/>

　　選擇框的multiple特效能控制其是否多選，而這也會決定是否需要繫結陣列，如下所示。

<select v-model="selected">
  <option value="1">strick</option>
  <option value="2">freedom</option>
</select>
<select v-model="selecteds" multiple>
  <option value="1">strick</option>
  <option value="2">freedom</option>
</select>

3）值繫結

　　單選框、複選框和選擇框的值原先只能是字串或布林值，而通過v-bind指令就能讓它們繫結任意型別的值，如下所示，為兩個單選框的value特性綁定了一個物件。當選中其中一個按鈕時，color屬性的值就會更新成繫結的物件。

<input type="radio" v-model="color" :value="{digit: 1}" />
<input type="radio" v-model="color" :value="{digit: 2}" />

　　複選框包含兩個特殊的特性：true-value和false-value（如下程式碼所示），當將其選中時，toggle屬性會更新為yes屬性的值，否則更新為no屬性的值。

<input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no" />
<script>
  var vm = new Vue({　
    data: {　　
      toggle: 1,
      yes: 1,
      no: 0
    }
  });
</script>

4）修飾符

　　Vue為v-model指令提供了3個修飾符，如下所列，每個修飾符後面都給出了相應的示例。

　　（1）.lazy修飾符能將同步輸入值的事件從input替換成change，以下面的文字框為例，只有當修改其值並失去焦點時，才會更新資料物件的name屬性。

<input type="text" v-model.lazy="name" />

　　（2）.number修飾符能讓輸入值自動轉換成數字，常與number型別的文字框配合使用。

<input type="number" v-model.number="age" />

　　（3）.trim修飾符能過濾輸入值的首尾空格。

<input type="text" v-model.trim="school" />    

&n