18 收集表单数据
使用vue中的v-model收集表单里面的数据，不同的表单元素配合v-model会有不同的写法和技巧
本次的表单元素包括：文本框，单选，多选，下拉框，文本域
18.1 编写表单元素
首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域
input输入框细节
这里有一个细节(小技巧)：表单编写input输入框的时候，通常会配合label标签使用并加上相关的css或或者js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是v-model获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别
不加上lable
页面的交互性很差，必须自己点击输入框才能获取到光标
加上lable
查看页面，点击账号会跳进对应的输入框并获取光标
继续编写表单元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form> 账号:<input type="text"><br/><br/> 密码:<input type="password"><br/><br/> 性别： 男<input type="radio" name="sex"> 女<input type="radio" name="sex"><br/><br/> 爱好： 学习 <input type="checkbox" name=""> 打游戏 <input type="checkbox" name=""> 吃饭 <input type="checkbox" name=""><br/><br/> 所属校区 <select> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select><br/><br/> 其他信息 <textarea></textarea><br/><br/> <input type="checkbox"> 阅读并接受<a href="#">《用户协议》</a> <button>提交</button> </form> </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ } }) </script> </html>
查看页面
表单元素到此就写完了，接下来就要把表单交给vue管理并收集数据了
18.2 text输入框和password输入框
这两个比较简单，定义两个变量绑定在输入框里面
18.3 radio单选按钮
接下来就是性别，也就是radio单选按钮，多个单选按钮，但是只能选中一个单选按钮，
错误示例
如果直接简单粗暴的定义变量使用v-model绑定单选框，是不行的
页面上获取不到选中的值，为什么会这样的？因为v-model默认收集的是输入框的value,但是目前单选框是没有value的，所以获取不到
正确示例
给单选按钮赋值value属性即可，注意：value不要重复
如果想要某一个单元按钮默认选中，可以在属性赋默认值
男默认选中
18.4 checkbox多选框
错误示例
和单选框一样，不能直接定义属性使用v-model
可以看到收集到的是一个布尔值
这个错误和单元框一致，也是没value造成的，至于为什么是布尔值，vue获取的是这一组复选框里面的checked，所以只要选中了就是true，不然就是false
那么给复选框赋上value再试试
发现还是不行
哎，为什么给复选框配置了value属性还是不行呢？
因为复选框的初始值能够影响到收集到的数据，如果把复选框的属性错误的写成了字符串，那么就算配置了value值也不行
正确示例
注意：如果需要获取复选框的值，可以使用这种写法，如果只需要判断是否被选中，也就是true或false，可以参考下面的另外一种使用方式
多组复选框属性应该写成一个数组
这样就好了
18.5 select下拉框
select下拉框就比较正常了，和正常的输入框是一样的
如果想要上来就默认选中，也是和单选框一样的
18.6 textarea多行输入框
textarea多行输入框本质来说也是输入框，写法和正常文本框是一样的
18.7 多选框另类使用场景
这个复选框和上面爱好那个复选框是不一样的，它不需要收集value值，只需要知道是否被选择，也就是ture或false，这时候就可以安装输入框的方式去写，直接去定义字符串，而不是数组
然后把全部数据填满看下
这时候点击提交按钮，表单刷新了，一般都是通过ajax或者axios提供到后端，我们就打印在控制台上
但是单击提交按钮会刷新表单和页面，要使用阻止默认行为，可以使用@sumbit事件去阻止表单提交
18.8 @sumbit提交事件
@sumbit阻止默认提交行为
这样点击按钮提交后就不会刷新提交表单了
如果一个个属性挨个输出，这些写很麻烦
18.9 一次性输出(提交)整个表单
一般使用ajax或者axios进行前后端交互的时候，一般都把收集到的数据整理成一个json格式，然后传给后端，那么在这一个个输出肯定不合理
方式1 使用JSON.stringify
我们可以使用JSON.stringify(this._data)，使用this,_data获取表单全部的属性，然后将表单里面的数据转换为JSON
解析一下也是没问题的
方式2 定义对象包裹全部属性
上面的方式虽然可以，但是我们尽量不要直接去访问this._data，一般我们可以把这些表单属性定义成一个大的对象里面
也是没有问题的
虽然数据获取没有问题，但是有一点小缺陷，就是页面中所有用到v-model的地方，都要加一个前缀：userInfo.xxx
18.10 v-model的修饰符
介绍一下vue中对于v-model的修饰符
1 number
如果我现在加了一个输入框age
但是我输入的12abc
这个输入框肯定是只能输入数字的，我们需要控制只能输入数字
原生方式
原生的方式也可以控制，把text改为number
再次输入的话发现输入除了数值都输不进去，而且加了一个增减的符号，看似解决了，但是仔细观察发现，age后面的值是一个字符串，这是因为页面还会以为输入的东西是字符，这样可能会导致在特殊的场景下还是会被解析成字符串的从而引起报错
vue方式
vue提供自己的解决方式，直接在v-model后面跟.number即可解决
建议两个number一起使用，这样效果更佳，一遍控制只能输入数字，一遍做转换
:<input type="number" v-model.number="userInfo.age"><br/><br/>
再次测试完美解决
如果不一起使用，就会造成可以输入字母但是不会做转换的奇怪操作
2 lazy
如果不加lazy，就会实时刷新获取数据，但是如果加了lazy,就会在失去焦点的时候刷新获取数据
3 trim
trim去掉前后的空格
如果没加trim，我们输入空格也是会被收集到
如果加了trim,就会自动去掉空格
18.11 总结
- 收集表单数据
- 若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值
- 若：<input type="radio"/>,则v-model收集到是value值，且要给标签配置value值
- 若：<input type="checkbox"/>
- 1 没有配置input的value属性，那么收集的就是checked(布尔值，勾选true，不勾选false)
- 2 配置Input的value属性:
- (1)v-model的初始值是非数组，那么收集的就是checked(布尔值，勾选true，不勾选false)
- (2) v-model的初始值是数组，那么收集的值就是value组成的数组
- 备注：
- v-model的三个修饰符：
- lazy:失去焦点再收集数据
- number:输入字符串转为有效的数字
- trim:过滤收尾的空格再解析
