你可以用 v-model 指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖，它負責監聽用戶的輸入事件以更新數據，并特別處理一些極端的例子

基礎用法：

文本：

通過v-model自動獲取用戶的輸入，然后會自動選擇正確的方法來更新data中的message屬性，從而展現給用戶新的數據

多行文本：

復選框：

單個勾選框，邏輯值

多個勾選框，綁定到同一個數組

對于勾選框，v-model綁定的data中的屬性的值通常是邏輯值true/false

單選按鈕：

對于單選框，v-model所綁定的data中的某個屬性的屬性值通常對應的就是來自選中的標簽的value屬性的值

所以本例中的實現雙向綁定的picked屬性的值就是選中的單選按鈕的value屬性值，One或Two

選擇列表：

單選列表

多選列表（綁定到一個數組）

對于選擇列表，v-model所綁定的data中的某個屬性的屬性值通常對應的就是來自選中的option標簽的value屬性的值

綁定value:

對于單選按鈕，勾選框及選擇列表選項， v-model 綁定的 value 通常是靜態字符串（對于勾選框是邏輯值）

但是有時我們想綁定 value 到 Vue 實例的一個動態屬性上，這時可以用 v-bind 實現，并且這個屬性的值可以不是字符串

單選按鈕：

當按鈕選中的時候，會用value屬性對應的值更新data中的pick屬性，而value屬性的值得來源是動態的

選項列表設置：

動態的將value屬性綁定值為一個包含number屬性的對象，該對象會被自動修改為data中的selected屬性的值，反過來改變視圖層的”{{selected}}”的顯示。。。完成數據的雙向綁定

修飾符：

(1) .lazy:在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步

(2) .number:如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值

這通常很有用，因為在 type=”number” 時 HTML 中輸入的值也總是會返回字符串類型

(3) .trim:如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入

總結

以上是生活随笔為你收集整理的Vue基础之表单控件绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。