结论:
1.如果你需要收集的表单类型,是需要自己敲键盘输入的,那么v-model收集的数据就是你输入的数据。具体常用的有以下几种
<input type="text">
<input type="password">
<input type="number">
<textarea></textarea>
...
2. 如果你收集的表单类型为单选框。那么v-model收集的数据为你手动给单选框配置的value值。如:
性别:
男:<input type="radio" name="sex" v-model="sex" value="male">
女:<input type="radio" name="sex" v-model="sex" value="female">
最后收集到的数据为‘femal’
3.如果你需要收集的是复选框
情况1: 你并没有设置value属性,那么收集到的数据为checked(是一个布尔值)
爱好:
学习 <input type="checkbox" v-model="hobby" >
打游戏 <input type="checkbox" v-model="hobby" >
吃饭 <input type="checkbox" v-model="hobby" >
没有配置value,收集到的数据为布尔类型
扫描二维码关注公众号,回复:
14925042 查看本文章
情况2:你配置了value属性,但是v-model的初始值为非数组,那么收集到的情况与情况1一致
爱好:
学习 <input type="checkbox" v-model="hobby" value="study">
打游戏 <input type="checkbox" v-model="hobby" value="game">
吃饭 <input type="checkbox" v-model="hobby" value="eat">
当hobby的初始值为空字符时,我收集到的hobby为 布尔类型
情况3:你配置了value属性,v-model的初始值为数组,那么最终收集到的数据为value组成的数组。
爱好:
学习 <input type="checkbox" v-model="hobby" value="study">
打游戏 <input type="checkbox" v-model="hobby" value="game">
吃饭 <input type="checkbox" v-model="hobby" value="eat">
hobby的初始值为[],此时勾选了打游戏和吃饭,那么hobby收集到的数据为study和game组成的数组。
扩展:
v-model的修饰符
1.trim : 忽略空格
2.lazy : 失去焦点时收集value值
3.number :强制转变为number类型