# 表單控件綁定
## 基礎用法
可以用 `v-model` 指令在表單控件元素上創建雙向數據綁定。根據控件類型它自動選取正確的方法更新元素。盡管有點神奇,`v-model` 不過是語法糖,在用戶輸入事件中更新數據,以及特別處理一些極端例子。
### Text
```
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
```

### Checkbox
單個勾選框,邏輯值:
```
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
```

多個勾選框,綁定到同一個數組:
```
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
```

### Radio
```
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
```

### Select
單選:
```
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
```

多選(綁定到一個數組):
```
<select v-model="selected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>
```

動態選項,用 `v-for` 渲染:
```
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
```
```
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
```

## 值綁定
對于單選按鈕,勾選框及選擇框選項,`v-model` 綁定的值通常是靜態字符串(對于勾選框是邏輯值):
```
<!-- 當選中時,`picked` 為字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 當選中時,`selected` 為字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
```
但是有時我們想綁定值到 Vue 實例一個動態屬性上。可以用 `v-bind` 做到。 而且 `v-bind` 允許綁定輸入框的值到非字符串值。
### Checkbox
```
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
```
```
// 選中
vm.toggle === vm.a
// 取消選中
vm.toggle === vm.b
```
### Radio
```
<input type="radio" v-model="pick" v-bind:value="a">
```
```
// 選中
vm.pick === vm.a
```
### Select Options
```
<select v-model="selected">
<!-- 對象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
```
```
// 選中
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
```
## 參數特性
### lazy
在默認情況下,`v-model` 在`input` 事件中同步輸入框值與數據,可以添加一個特性 `lazy`,從而改到在 `change` 事件中同步:
```
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
```
### number
如果想自動將用戶的輸入保持為數字,可以添加一個特性 `number`:
```
<input v-model="age" number>
```
### debounce
`debounce` 設置一個最小的延時,在每次敲擊之后延時同步輸入框的值與數據。如果每次更新都要進行高耗操作(例如在輸入提示中 Ajax 請求),它較為有用。
```
<input v-model="msg" debounce="500">
```

注意 `debounce` 參數不會延遲 input 事件:它延遲“寫入”底層數據。因此在使用 `debounce` 時應當用 `vm.$watch()` 響應數據的變化。若想延遲 DOM 事件,應當使用 [debounce 過濾器](/api/#debounce)。
- 教程
- 起步
- 概述
- Vue 實例
- 數據綁定語法
- 計算屬性
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 方法與事件處理器
- 表單控件綁定
- 過渡
- 組件
- 深入響應式原理
- 自定義指令
- 自定義過濾器
- 混合
- 插件
- 構建大型應用
- 對比其它框架
- API
- 示例
- Markdown 編輯器 Example
- GitHub 提交 Example
- Firebase + 驗證 Example
- 表格組件 Example
- 樹狀視圖 Example
- SVG 圖形 Example
- 模態組件 Example
- Elastic Header Example
- 自定義指令 Example
- TodoMVC Example
- HackerNews 克隆 Example