vue- 表单元素进阶收集操作

多选框另类使用场景

这个复选框和上面爱好那个复选框是不一样的，它不需要收集 value 值，只需要知道是否被选择，也就是 ture 或 false，这时候就可以安装输入框的方式去写，直接去定义字符串，而不是数组

然后把全部数据填满看下

这时候点击提交按钮，表单刷新了，一般都是通过 ajax 或者 axios 提供到后端，我们就打印在控制台上

但是单击提交按钮会刷新表单和页面，要使用阻止默认行为，可以使用 @sumbit 事件去阻止表单提交

@sumbit 提交事件

@sumbit 阻止默认提交行为

这样点击按钮提交后就不会刷新提交表单了

如果一个个属性挨个输出，这些写很麻烦

一次性输出(提交)整个表单

一般使用 ajax 或者 axios 进行前后端交互的时候，一般都把收集到的数据整理成一个 json 格式，然后传给后端，那么在这一个个输出肯定不合理

方式 1 使用 JSON.stringify

我们可以使用 JSON.stringify(this._data)，使用 this,_data 获取表单全部的属性，然后将表单里面的数据转换为 JSON

解析一下也是没问题的

方式 2 定义对象包裹全部属性

上面的方式虽然可以，但是我们尽量不要直接去访问 this._data，一般我们可以把这些表单属性定义成一个大的对象里面

也是没有问题的

虽然数据获取没有问题，但是有一点小缺陷，就是页面中所有用到 v-model 的地方，都要加一个前缀：userInfo.xxx

v-model 的修饰符

介绍一下 vue 中对于 v-model 的修饰符

number

如果我现在加了一个输入框 age

但是我输入的 12abc

这个输入框肯定是只能输入数字的，我们需要控制只能输入数字

原生方式

原生的方式也可以控制，把 text 改为 number

再次输入的话发现输入除了数值都输不进去，而且加了一个增减的符号，看似解决了，但是仔细观察发现，age 后面的值是一个字符串，这是因为页面还会以为输入的东西是字符，这样可能会导致在特殊的场景下还是会被解析成字符串的从而引起报错

vue 方式

vue 提供自己的解决方式，直接在 v-model 后面跟.number 即可解决

建议两个 number 一起使用，这样效果更佳，一遍控制只能输入数字，一遍做转换

:<input type="number" v-model.number="userInfo.age"><br/><br/>

再次测试完美解决

如果不一起使用，就会造成可以输入字母但是不会做转换的奇怪操作

lazy

如果不加 lazy，就会实时刷新获取数据，但是如果加了 lazy,就会在失去焦点的时候刷新获取数据

trim

trim 去掉前后的空格

如果没加 trim，我们输入空格也是会被收集到

如果加了 trim,就会自动去掉空格

总结

• 收集表单数据

• 若：<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:过滤收尾的空格再解析