总结收集表单数据

1.1，收集数据案例

可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用。

 1.1.1，type类型的输入框

这种方式的输入框，是可以直接通过这个v-model获取到值的。因为v-model默认就是收集输入框的value值

 1.1.2，radio类型的单选框

和上面的type类型不一样，因为上面的text类型有输入的value，而这种类型的数据没有输入值，只有单选值，因此需要在这个标签内部加上这个value值，这样才能获取到选择的值。

 1.1.3，checkbox类型的复选框
在这个复选框中，由于也和这个单选框一样，只有选择，没有具体的输入这个value值，因此需要在标签内部加上这个value值，除了需要在这个标签内部加上这个value值之外，还需要在vue实例的data中，通过数组的方式接收这个复选框所选择的值。

如果复选框没有这个value值，那么勾选的本质就是一个布尔属性，如需要在勾选注意事项的时候，是可以不需要这个value值的，并且在data中接收到的这个值也是一个布尔值。

 1.1.4，select类型的下拉框

这个由于也是选择框，没有输入具体的数据，因此需要在option中配置value值。并且在vue实例中的data数据用字符串接收即可。

1.2，收集表单数据总结

text

若输入框是一个文本属性，则v-model收集的值是value值，用户输入的值就是value值

 radio

若输入框是一个单选框，则v-model收集的是value值，并且在标签内需要配置value值

checkbox

若输入框是一个复选框，那就需要分情况讨论

1，如果input中没有配置value属性，那么收集到的就是一个是否勾选的checked，是一个布尔值

2，如果input输入框中有配置value的属性：

(1).如果在data中的初始值是一个非数组，如一个字符串，那么收集到的也是checked的布尔值

(2).如果data中的初始值是一个数组，那么收集到的就是value组成的数组

1.3，v-model的三个修饰符

lazy

指的是失去焦点在收集数据，如下在文本框中输入数据时，不需要实时的根据用户的输入或者删除将内容进行数据的收集，而是在点击其他组件，失去焦点的时候再去收集全部的数据a

 

number

输入字符串转化为有效的数字，比如在输入用户的年龄或者电话号码的时候，如果后端没有做这个是否为全部数字的校验的时候，那么就可以通过这个指令进行校验了。这个指令一般搭配这个输入框的number类型一起使用

trim

对输入的数据进行收尾的去除空格。这个在实际开发中，如果后端没有及时的对前端传过来的数据进行一个字符串的去空格的话，也是可以通过前端的这个指令进行一个数据的去重的。