v-model指定可以實現表單值與屬性的雙向綁定。即表單元素中更改的值會自動的更新屬性中的值，屬性中的值發生變化會自動更新表單里的值。
綁定的屬性和事件
v-model在內部輸入不同的元素使用不同的屬性並拋出不同的事件。
- text和textarea元素使用value屬性和input事件；
- checkbox和redio使用checked屬性和change事件；
- select字段將value作為prop並將change作為事件；
修飾符：
-
.lazy：在默認情況下，v-model每次input事件觸發后，將輸入框的值與數據進行同步（除了上述輸入法組合文字時）。當添加修飾符：.lazy后，將轉變為使用change事件進行同步。
-
.number： 將用戶輸入的值轉變為數值形式，自動刪除非數值的值，只保留數值。該修飾符只在 type="number"時有效。
-
.tirm：自動過濾掉用戶輸入的首尾空白字符。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>Vue表單事件</title> </head> <body> <h4>綁定的屬性和事件</h4> <div id="app"> <h5>checkbox：</h5> <div> 請選擇四大名著： <input type="checkbox" value="西游記" v-model="choose_2">西游記 <input type="checkbox" value="紅樓夢" v-model="choose_2">紅樓夢 <input type="checkbox" value="數據結構" v-model="choose_2">數據結構 </div> <p>您選擇的是：{{choose_2}}</p> <h5>select：</h5> <div> <select v-model="sex"> <option value="男">男</option> <option value="女">女</option> </select> 您選擇的性別是：{{sex}} </div> <h4>修飾符：</h4> <h5>.lazy</h5> <div> <input type="text" v-model.lazy="msg"> 您輸出的值是：{{msg}} </div> <h5>.number</h5> type="number"時有效。 <input type="number" v-model.number="age"> 您輸出的年齡是：{{age}} <h5>.tirm</h5> <input type="text" v-model.tirm="msg_2"><br> 您輸入的內容為：{{msg_2}} </div> <script> new Vue({ el: "#app", data: { choose_2: [], sex: '', msg: '', age: '', msg_2: '', } }) </script> </body> </html>