表單輸入綁定
基礎用法
你可以使用 v-model 指令在表單 <input> 、<textarea>、<select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇，但 v-module 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作爲數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。
v-model 在內部爲不同的輸入元素使用不同的屬性並拋出不同的事件：
.text和textarea 元素使用 value 屬性和 input 事件；
.checkbox 和 radio 使用 checked 屬性和 change 事件；
.select 字段將 value 作爲 prop 並將 change 作爲事件。
注意：對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。
文本
單行文本和多行文本
在文本區域插值 (<textarea>{{text}}</textarea>) 並不會生效，應用 v-modle 來代替。
複選框
單個複選框，綁定到布爾值：
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox">{{checked}}</label>
多個複選框，綁定到同一個數組：
單選按鈕：
選擇框
單選時：
注意：如果 v-model 表達式的初始值未能匹配任何選項， <select> 元素將被渲染爲“未選中”狀態。在 IOS 中，這會使用戶無法選擇第一個選項。因爲這樣的情況下，ISO 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值爲空的禁用選項。
多選時（綁定到一個數組）：
用 v-for 渲染的動態選項：
值綁定
對於單選按鈕，複選框及選擇框的選項， 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 實現，並且這個屬性的值可以不是字符串。
複選框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 當選中時
vm.toggle === 'yes'
// 當沒有選中時
vm.toggle === 'no'
注意：這裏的 tru-value 和 false-value 特性並不會影響輸入控件的 value 特性，因爲瀏覽器在提交表單時並不會包含未被選中的複選框。如果要確保表單中這兩個值中的一個能夠被提交，（比如“yes”或“no”），請換用單選按鈕。
單選按鈕
<input type="radio" v-model="pick" v-bind:value="a">
// 當選中時
vm.pick
選擇框的選項
<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.lazy="msg" >
.number
如果想自動將用戶的輸入值轉爲數值類型，可以給 v-model 添加 number 修飾符：
<input v-model.number="age" type="numb
.trim
如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：
<input v-model.trim="msg">
在組件上使用 v-model
HTML 原生的輸入元素類型總是不能滿足需求。幸好， Vue 的組件系統會允許你創建具有完全自定義行爲且可複用的輸入組件。這些輸入組件甚至可以和 v-model 一起使用！