https://jsrun.pro/cLfKp/edit ### 基礎語法 使用v-model在表單元素`<input>`、`<textarea>`和`<select>`元素上創建雙向數據綁定。v-model本質不過是語法糖。 重要： `v-model`會忽略所有表單元素的`value`、`checked`、`selected`attribute 的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的`data`選項中聲明初始值。 `v-model`在內部為不同的輸入元素使用不同的屬性并拋出不同的事件： * text 和 textarea 元素使用`value`屬性和`input`事件； * checkbox 和 radio 使用`checked`屬性和`change`事件； * select 字段將`value`作為 prop 并將`change`作為事件。 重要： 對于需要使用[輸入法](https://zh.wikipedia.org/wiki/%E8%BE%93%E5%85%A5%E6%B3%95)(如中文、日文、韓文等) 的語言，你會發現`v-model`不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用`input`事件。 #### 文本 #### 多行文本 #### 復選框 多個復選框，可以綁定數組 #### 單選按鈕 #### 選擇框 ### 值綁定 #### 復選框 ``` <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" > ``` ``` // 當選中時 vm.toggle === 'yes' // 當沒有選中時 vm.toggle === 'no' ``` 這里的`true-value`和`false-value`attribute 并不會影響輸入控件的`value`attribute，因為瀏覽器在提交表單時并不會包含未被選中的復選框。如果要確保表單中這兩個值中的一個能夠被提交，(比如“yes”或“no”)，請換用單選按鈕。 #### 單選按鈕 ``` <input type="radio" v-model="pick" v-bind:value="a"> ``` ``` // 當選中時 vm.pick === vm.a ``` #### 選擇框的選項 ### 修飾符 #### .lazy v-model在每次input事件觸發后將輸入框的值與數據進行同步， 通過添加lazy修飾符，從而轉變為使用change事件進行同步。 ``` <!-- 在“change”時而非“input”時更新 --> <input v-model.lazy="msg" > ``` #### .number 如果想自動將用戶的輸入值轉為數值類型， 可以給v-model添加number修飾符： ``` <input v-model.number="age" type="number"> ``` 這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。 #### .trim 如果要自動過濾用戶輸入的首尾空白字符，可以給`v-model`添加`trim`修飾符： ``` <input v-model.trim="msg"> ```