v-model

在很多的 v-function 里有一个很特别，就是 v-model，他就专门用于表单< input>和< textarea元素上创建双向绑定的.

每个表单绑定了 v-model 以后，vue 就会根据表单的特性去执行一些提交或者传值:

input textarea v-model=‘message’ 这样{{message}}就会等于 input 输入框的值
CheckBox ->v-model= ‘checked’ 这样{{checked}}就是这个单选框是否被选
CheckBox ->v-model= ‘checkName’ 这样每选一个 Check就会把 value push到{{checkName}}中
radio -> v-model=‘picked’ 和 CheckBox 很像，不过不是 push 是赋值=
select -> v-model=‘selected’， {{selected}} 等于<option>的值

值绑定

对于单选按钮，复选框及选择框的选项，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>

复选框

<input
 type="checkbox"
 v-model="toggle"
 true-value="yes"
 false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮

单选按钮

1	<input type="radio" v-model="pick" v-bind:value="a">

1 2	// 当选中时 vm.pick === vm.a

选择框的选项

<select v-model="selected">
 <!-- 内联对象字面量 -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>

1
2
3

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

1 2	<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >

.number

这样输入框输入的值会自动转化成数字类型

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

总结

看完以后会发现，其实 v-model 就是一个语法糖而已，实质是 v-bind，把表单输入的绑定值做了一层封装

黄威龙的笔记

Vue 表单输入绑定