--- title: 表單控件綁定 type: guide order: 10 --- ## 基礎用法 可以用 `v-model` 指令在表單控件元素上創建雙向數據綁定。根據控件類型它自動選取正確的方法更新元素。盡管有點神奇，`v-model` 不過是語法糖，在用戶輸入事件中更新數據，以及特別處理一些極端例子。 ### Text ``` html <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit me"> ``` {% raw %} <div id="example-1" class="demo"> <span>Message is: {{ message }}</span><br> <input type="text" v-model="message" placeholder="edit me"> </div> <script> new Vue({ el: '#example-1', data: { message: '' } }) </script> {% endraw %} ### Checkbox 單個勾選框，邏輯值： ``` html <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> ``` {% raw %} <div id="example-2" class="demo"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> <script> new Vue({ el: '#example-2', data: { checked: false } }) </script> {% endraw %} 多個勾選框，綁定到同一個數組： ``` html <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> ``` {% raw %} <div id="example-3" class="demo"> <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> </div> <script> new Vue({ el: '#example-3', data: { checkedNames: [] } }) </script> {% endraw %} ### Radio ``` html <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> ``` {% raw %} <div id="example-4" class="demo"> <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> </div> <script> new Vue({ el: '#example-4', data: { picked: '' } }) </script> {% endraw %} ### Select 單選： ``` html <select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> ``` {% raw %} <div id="example-5" class="demo"> <select v-model="selected"> <option selected>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> <script> new Vue({ el: '#example-5', data: { selected: null } }) </script> {% endraw %} 多選（綁定到一個數組）： ``` html <select v-model="selected" multiple> <option selected>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected | json }}</span> ``` {% raw %} <div id="example-6" class="demo"> <select v-model="selected" multiple style="width: 50px"> <option selected>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected | json }}</span> </div> <script> new Vue({ el: '#example-6', data: { selected: [] } }) </script> {% endraw %} 動態選項，用 `v-for` 渲染： ``` html <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> ``` ``` js new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) ``` {% raw %} <div id="example-7" class="demo"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script> new Vue({ el: '#example-7', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) </script> {% endraw %} ## 值綁定 對于單選按鈕，勾選框及選擇框選項，`v-model` 綁定的值通常是靜態字符串（對于勾選框是邏輯值）： ``` html <!-- 當選中時，`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 ``` html <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> ``` ``` js // 選中 vm.toggle === vm.a // 取消選中 vm.toggle === vm.b ``` ### Radio ``` html <input type="radio" v-model="pick" v-bind:value="a"> ``` ``` js // 選中 vm.pick === vm.a ``` ### Select Options ``` html <select v-model="selected"> <!-- 對象字面量 --> <option v-bind:value="{ number: 123 }">123</option> </select> ``` ``` js // 選中 typeof vm.selected // -> 'object' vm.selected.number // -> 123 ``` ## 參數特性 ### lazy 在默認情況下，`v-model` 在`input` 事件中同步輸入框值與數據，可以添加一個特性 `lazy`，從而改到在 `change` 事件中同步： ``` html <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model="msg" lazy> ``` ### number 如果想自動將用戶的輸入保持為數字，可以添加一個特性 `number`： ``` html <input v-model="age" number> ``` ### debounce `debounce` 設置一個最小的延時，在每次敲擊之后延時同步輸入框的值與數據。如果每次更新都要進行高耗操作（例如在輸入提示中 Ajax 請求），它較為有用。 ``` html <input v-model="msg" debounce="500"> ``` {% raw %} <div id="debounce-demo" class="demo"> {{ msg }}<br> <input v-model="msg" debounce="500"> </div> <script> new Vue({ el:'#debounce-demo', data: { msg: 'edit me' } }) </script> {% endraw %} 注意 `debounce` 參數不會延遲 input 事件：它延遲“寫入”底層數據。因此在使用 `debounce` 時應當用 `vm.$watch()` 響應數據的變化。若想延遲 DOM 事件，應當使用 [debounce 過濾器](/api/#debounce)。