vue.js的一大功能便是實現數據的雙向綁定，本文就表單處理時運用v-model指令實現雙向綁定做一個介紹：

v-model這個指令只能用在 <input> , <select> , <textarea>這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據。這是通過設置屬性訪問器實現的。例如：

var data = {
	name: "erik",
	getName: function() {
		return this.name;
	},
	setName: function(name) {
		this.name = name;
	}
};
 

上面的代碼中我們通過 getName() 和 setName() 方法作為訪問器，我們可以進一步嚴格限制（如借助Object.defineProperty方法）不直接訪問name這個屬性，所有對 data.name 的讀寫都必須通過 data.getName() 和 data.setName() 方法。此時我們改寫訪問器方法，添加對屬性值改變得到監控，便可以實現數據的雙向綁定。

那麽在表單處理中我們具體如何使用v-model呢，先看看官方文檔給出的例子：

<form id="demo">
  <!-- text -->
  <p>
    <input type="text" v-model="msg">
    {{msg}}
  </p>
  <!-- checkbox -->
  <p>
    <input type="checkbox" v-model="checked">
    {{checked ? "yes" : "no"}}
  </p>
  <!-- radio buttons -->
  <p>
    <input type="radio" name="picked" value="one" v-model="picked">
    <input type="radio" name="picked" value="two" v-model="picked">
    {{picked}}
  </p>
  <!-- select -->
  <p>
    <select v-model="selected">
      <option>one</option>
      <option>two</option>
    </select>
    {{selected}}
  </p>
  <!-- multiple select -->
  <p>
    <select v-model="multiSelect" multiple>
      <option>one</option>
      <option>two</option>
      <option>three</option>
    </select>
    {{multiSelect}}
  </p>
  <p><pre>data: {{$data | json 2}}</pre></p>
</form>
 

對應的js：

new Vue({
  el: ‘#demo‘,
  data: {
    msg      : ‘hi!‘,
    checked  : true,
    picked   : ‘one‘,
    selected : ‘two‘,
    multiSelect: [‘one‘, ‘three‘]
  }
})

效果如下：

小夥伴們可以嘗試一下寫出這個頁面，在瀏覽器中當你調整上面表單元素的選中值時，你會發現下面打印的vue實例內容也會隨之改變，而如果你在代碼中改變vue實例data內容時渲染出來的表單選中值也會隨之改變。

另外，v-model這個指令還有幾個可選的參數：lazy,number,options,debounce


1.使用lazy參數是將雙向數據同步的時間節點從input觸發改為了change觸發，調用方式如下：

<!-- synced after "change" instead of "input" -->
<input v-model="msg" lazy>

2.使用number參數是通知v-model綁定的dom元素把用戶輸入值默認當成數字來處理，調用如下：

<input v-model="age" number>

3.使用options參數是用於渲染一個select項的列表，調用方式如下：

<select v-model="selected" options="myOptions"></select>

其中options的參數名指向一個數組，該數組可以包括字符串或對象，對象可以是{text:‘‘, value:‘‘}的形式，指定了<option>的value屬性與text內容，例如：

[
  { text: ‘A‘, value: ‘a‘ },
  { text: ‘B‘, value: ‘b‘ }
]

將渲染出：

<select>
  <option value="a">A</option>
  <option value="b">B</option>
</select>

如果對象是{ label:‘‘, options:[...] }的形式，則可以渲染出多個option組<optgroup>,如下例：

[
  { label: ‘A‘, options: [‘a‘, ‘b‘]},
  { label: ‘B‘, options: [‘c‘, ‘d‘]}
]

將渲染出：

<select>
  <optgroup label="A">
    <option value="a">a</option>
    <option value="b">b</option>
  </optgroup>
  <optgroup label="B">
    <option value="c">c</option>
    <option value="d">d</option>
  </optgroup>
</select>

4.使用debounce參數是指定一個延遲時間，延遲從按鍵觸發到數據更新同步之間的時間，當我們的更新操作比較耗時時這個屬性十分有用，例如搜索引擎在我們鍵入字符時發送ajax請求完成自動補全提示，調用如下：

<input v-model="msg" debounce="500">

v-model、Handling Forms