（1）文本类型/密码类型 v-model收集的是value值
用户输入的就是value值
<input type="text" v-model="usrInfo.account">
<input type="password" v-model="usrInfo.password">（2）number类型：限制输入的只能是数字
<input type="number" v-model.number="usrInfo.age">（3）radio类型
v-model收集的是value值，需要手动给标签配置value值
男<input type="radio" name="sex" v-model="usrInfo.sex" value="male">
女<input type="radio" name="sex" v-model="usrInfo.sex" value="female">如果要设置默认选中，在data中配置要选中的数据即可
（4）checkBox类型
① 如果没有配置input的value属性，那么收集到的就是checked(勾选或者未勾选，是bool值)
② 如果配置了input中的value属性
1）v-model的初始值是非数组，收集到的checked（勾选或者未勾选，是bool值）
2）v-model的初始值是数组，收集到的就是value组成的数组
所以如果要使用多个复选框, 必须要保证两点
1）每一项都要配置value
2) v-model的值要配置成数组的形式
学习<input type="checkbox" v-model="usrInfo.hobby" value="study">
吃饭<input type="checkbox" v-model="usrInfo.hobby" value="eat">
打游戏<input type="checkbox" v-model="usrInfo.hobby" value="game">
(5) 下拉框：在select中配置v-model,在每一个option选项中配置value属性
<select v-model="usrInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京校区</option>
<option value="shanghai">上海校区</option>
<option value="shenzhen">深圳校区</option>
<option value="wuhan">武汉校区</option>
</select>如果要设置默认选中，在data中配置要选中的数据即可
(6) 多行输入框：v-model收集到的就是输入的数据
<textarea v-model="usrInfo.other"></textarea>（7）不需要收集value值的checkBox（只需要知道是否勾选）,可以不配置value属性
<input type="checkbox" v-model="usrInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>（8）v-model 修饰符
- number ：输入字符串转为有效的数字
<input type="number" v-model.number="usrInfo.age">两层限制：
第一层 type="number"，限制只能输入数字
第二层 v-model.number 将输入的字符串直接转为数字
-
lazy：失去焦点再收集数据(不是立即在开发者工具中更新，失去焦点之后更新)文章来源：https://www.toymoban.com/news/detail-618802.html
<textarea v-model.lazy="usrInfo.other"></textarea>-
trim：首尾空格过滤, 只能去除首尾的空格，不能去除中间的空格文章来源地址https://www.toymoban.com/news/detail-618802.html
<input type="text" v-model.trim="usrInfo.account">到了这里，关于Vue2第八节 收集表单数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
