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"> ```