v-model
用于在 表单类元素 （例如：input、textarea）上实现数据的双向绑定
注意：使用 v-model 后，所显示的值就只会依赖与绑定的数据，不会显示初始化的值
<textarea v-model="value2">不会显示这里的信息</textarea>
textarea 的初始信息不会被显示，而是显示 v-model 所绑定的 value2 的数据
单个单选框
直接用 v-bind 绑定一个布尔值
<input type="radio" :checked="oneRadio">
data: {
oneRadio: true,
}
多个单选框
多个单选框组合使用时，就需要 v-model 配合 value 来使用，绑定选中的单选框的 value 值，此处绑定的初始值可以随意给，初始值为空时就默认不选中。
张三：<input type="radio" name="checks" value="张三" v-model="checkName">
李四：<input type="radio" name="checks" value="李四" v-model="checkName">
王五：<input type="radio" name="checks" value="王五" v-model="checkName">
现在选中的是----{{checkName}}
data: {
checkName:'张三',
//给了初始值为张三，那么就会默认选中张三
//如果 checkName 初始值为空，就会默认不选中
}
复选框
- 单个复选框：直接绑定一个布尔值，可以用 v-bind 也可以用 v-model
<input type="checkbox" :checked="oneRadio">
<input type="checkbox" v-model="oneRadio">
- 多个复选框：需要 v-model 配合 value 来使用，v-model 绑定一个数组。如果绑定的是字符串，则会自动转换为布尔值，与所有绑定的复选框的 checked 属性相对应。
张三：<input type="checkbox" value="张三" v-model="checks">
李四：<input type="checkbox" value="李四" v-model="checks">
王五：<input type="checkbox" value="王五" v-model="checks">
data: {
checks:[],
}
下拉框
- 单选下拉框：所绑定的 value 初始值可以为数组也可以为字符串，有 value 就直接优先匹配一个 value 值，没有 value 就匹配一个 text 值。
<select v-model="selected">
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
</select> --------现在选中的是 -- {{selected}}
data: {
selected: '',
//也可以绑定为一个数组 selected:[]
}
- 多选下拉框
需要 v-model 配合 value 来使用，v-model 绑定一个数组（绑定字符串也会自动转化为数组），与复选框类似。
v-model 一定要绑定到 selector 上。
<select v-model="selectedmul" multiple>
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
</select> --------现在选中的是 -- {{selectedmul}}
data: {
selectedmul:[],
}
总结
- 如果是单选，初始化最好给定字符串，因为 v-model 此时绑定的是静态字符串或者布尔值。
- 如果是多选，初始化最好给定一个数组。
绑定值
- 单选框
只需要用 v-bind 给单个单选框绑定一个 value 值，此时，v-model 绑定的就是它的 value 值。
修饰符
-
lazy
v-model 默认是在input 输入时同步更新输入框中的数据，而使用 lazy 修饰符，可以使其在失去焦点或者敲回车之后再更新。
-
number
将输入的字符串转化为 number 类型
-
trim
自动过滤首尾输入的空格
