[toc]
## 基本用法
你可以在表單的 input 元素上使用 v-model 指令來創建雙向數據綁定。它會根據 input 元素的類型自動選取正確的綁定模式。
**示例**
~~~
<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>
new Vue({
el: '#demo',
data: {
msg : 'hi!',
checked : true,
picked : 'one',
selected : 'two',
multiSelect: ['one', 'three']
}
})
~~~
**效果**
## 惰性更新
默認情況下，v-model 會在每個 input 事件之后同步輸入的數據。你可以添加一個 lazy 特性，將其改變為在 change 事件之后才進行同步。
~~~
<!-- 在 "change" 而不是 "input" 事件觸發后進行同步 -->
<input v-model="msg" lazy>
~~~
## 轉換為數字
如果你希望將用戶的輸入自動轉換為數字，你可以在 v-model 所在的 input 上添加一個 number 特性。
~~~
<input v-model="age" number>
~~~
## 動態 select 選項
當你需要為一個 `<select>` 元素動態渲染列表選項時，推薦將 options 特性和 v-model 指令配合使用，這樣當選項動態改變時，v-model 會正確地同步：
~~~
<select v-model="selected" options="myOptions"></select>
~~~
在你的數據里，myOptions 應該是一個指向選項數組的路徑或是表達式。
該數組可以包含普通字符串或對象。對象的格式應為 {text:'', value:''}。這允許你把展示的文字和其背后對應的值區分開來。
~~~
[
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
~~~
會渲染成：
~~~
<select>
<option value="a">A</option>
<option value="b">B</option>
</select>
~~~
另外，數組里對象的格式也可以是 {label:'', options:[...]}。這樣的數據會被渲染成為一個 <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>
~~~
你的原始數據很有可能不是這里所要求的格式，因此在動態生成選項時必須進行一些數據轉換。為了簡化這種轉換，options 特性支持過濾器。將數據的轉換邏輯做成一個可復用的 自定義過濾器 。通常來說是個好主意：
~~~
Vue.filter('extract', function (value, keyToExtract) {
return value.map(function (item) {
return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract 'name'">
</select>
~~~
上述過濾器將像 [{ name: 'Bruce' }, { name: 'Chuck' }] 這樣的原始數據轉化為 ['Bruce', 'Chuck']，從而符合動態選項的格式要求。
## 輸入 Debounce
在一次輸入被同步到模型之前，debounce 特性允許你設置一個每次用戶事件后的等待延遲。如果在這個延遲到期之前用戶再次輸入，則不會立刻觸發更新，而是重置延遲的等待時間。當每次更新前你要執行繁重作業時會很有用，例如一個基于 ajax 的自動補全功能。
~~~
<input v-model="msg" debounce="500">
~~~
**結果**
注意 debounce 參數并不對用戶的輸入事件進行 debounce：它只對底層數據的 “寫入” 操作起作用。因此當使用 debounce 時，你應該用 vm.$watch() 而不是 v-on 來響應數據變化。
