Vue表单进阶操作

你的名字 2023-09-26 22:23 89阅读 0赞

## 多选框另类使用场景 ##

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

![在这里插入图片描述][861fbf1482e4480581f9c258eb45092e.png]

![在这里插入图片描述][db971180bab3429caad4f5ee1e888f4e.png]

![在这里插入图片描述][5e794d5e74204ba39a7b846b7a199c7f.png]

然后把全部数据填满看下

![在这里插入图片描述][f2901293c6a64098a736d3f8f02a7423.png]

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

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

## @sumbit阻止默认提交行为 ##

@sumbit阻止默认提交行为

![在这里插入图片描述][1040d60fa0184bc6b19056c2f766b495.png]

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

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

![在这里插入图片描述][95a3572f53cb4fc9bde5ce69f26f0dbb.png]

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

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

## 方式1 使用JSON.stringify ##

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

![在这里插入图片描述][2bc004ac8de140149f88ce4e30ffdfbe.png]

解析一下也是没问题的

![在这里插入图片描述][daf9a8ee386f44d781f55e5f49543f74.png]

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

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

![在这里插入图片描述][935f5be44d7647f582fc6078897e1213.png]

也是没有问题的

![在这里插入图片描述][341700df040848358836875b05610cad.png]

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

![在这里插入图片描述][a2df9ddeb9cd4516927e559b26d849ce.png]

## v-model的修饰符 ##

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

### number ###

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

![在这里插入图片描述][fecac2a316ed43a7be3783385026675d.png]

但是我输入的12abc

![在这里插入图片描述][a98d1b1f6ad346fd933a6adcfff42f35.png]

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

#### 原生方式 ####

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

![在这里插入图片描述][4911a70f58f74ee5aba073f6f4619f5f.png]

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

![在这里插入图片描述][d830cd634e654658b4a43b2d386fc338.png]

#### vue方式 ####

vue提供自己的解决方式，直接在v-model后面跟.number即可解决  
建议两个number一起使用，这样效果更佳，一遍控制只能输入数字，一遍做转换

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

![在这里插入图片描述][2616e058a2d8412baabb8c2d3e72ae3d.png]

再次测试完美解决

![在这里插入图片描述][a60f8a9d275a43fc8ab4d76c34399522.png]

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

![在这里插入图片描述][74eecfbe5d324e8eb0fb4c6690d0e4e8.png]

### lazy ###

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

![在这里插入图片描述][58b8394c11814716961304e146a6c6ff.png]

![在这里插入图片描述][154eafc85a294b64ae8fbe52c1186dcf.png]

### trim ###

trim去掉前后的空格  
如果没加trim，我们输入空格也是会被收集到

![在这里插入图片描述][15188c0d6d5b4517bc79f16e5925a6de.png]

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

![在这里插入图片描述][aaee89b1a5e14601a6bbe24056b717fd.png]  
![在这里插入图片描述][494ee80e905e4e7aa26c7466dccdab51.png]

## 总结 ##

收集表单数据  
若：,则v-model收集的是value值，用户输入的就是value值  
若：,则v-model收集到是value值，且要给标签配置value值  
若：  
1 没有配置input的value属性，那么收集的就是checked(布尔值，勾选true，不勾选false)  
2 配置Input的value属性:  
(1)v-model的初始值是非数组，那么收集的就是checked(布尔值，勾选true，不勾选false)  
(2) v-model的初始值是数组，那么收集的值就是value组成的数组  
备注：  
v-model的三个修饰符：  
lazy:失去焦点再收集数据  
number:输入字符串转为有效的数字  
trim:过滤收尾的空格再解析

[861fbf1482e4480581f9c258eb45092e.png]: https://img-blog.csdnimg.cn/861fbf1482e4480581f9c258eb45092e.png
[db971180bab3429caad4f5ee1e888f4e.png]: https://img-blog.csdnimg.cn/db971180bab3429caad4f5ee1e888f4e.png
[5e794d5e74204ba39a7b846b7a199c7f.png]: https://img-blog.csdnimg.cn/5e794d5e74204ba39a7b846b7a199c7f.png
[f2901293c6a64098a736d3f8f02a7423.png]: https://img-blog.csdnimg.cn/f2901293c6a64098a736d3f8f02a7423.png
[1040d60fa0184bc6b19056c2f766b495.png]: https://img-blog.csdnimg.cn/1040d60fa0184bc6b19056c2f766b495.png
[95a3572f53cb4fc9bde5ce69f26f0dbb.png]: https://img-blog.csdnimg.cn/95a3572f53cb4fc9bde5ce69f26f0dbb.png
[2bc004ac8de140149f88ce4e30ffdfbe.png]: https://img-blog.csdnimg.cn/2bc004ac8de140149f88ce4e30ffdfbe.png
[daf9a8ee386f44d781f55e5f49543f74.png]: https://img-blog.csdnimg.cn/daf9a8ee386f44d781f55e5f49543f74.png
[935f5be44d7647f582fc6078897e1213.png]: https://img-blog.csdnimg.cn/935f5be44d7647f582fc6078897e1213.png
[341700df040848358836875b05610cad.png]: https://img-blog.csdnimg.cn/341700df040848358836875b05610cad.png
[a2df9ddeb9cd4516927e559b26d849ce.png]: https://img-blog.csdnimg.cn/a2df9ddeb9cd4516927e559b26d849ce.png
[fecac2a316ed43a7be3783385026675d.png]: https://img-blog.csdnimg.cn/fecac2a316ed43a7be3783385026675d.png
[a98d1b1f6ad346fd933a6adcfff42f35.png]: https://img-blog.csdnimg.cn/a98d1b1f6ad346fd933a6adcfff42f35.png
[4911a70f58f74ee5aba073f6f4619f5f.png]: https://img-blog.csdnimg.cn/4911a70f58f74ee5aba073f6f4619f5f.png
[d830cd634e654658b4a43b2d386fc338.png]: https://img-blog.csdnimg.cn/d830cd634e654658b4a43b2d386fc338.png
[2616e058a2d8412baabb8c2d3e72ae3d.png]: https://img-blog.csdnimg.cn/2616e058a2d8412baabb8c2d3e72ae3d.png
[a60f8a9d275a43fc8ab4d76c34399522.png]: https://img-blog.csdnimg.cn/a60f8a9d275a43fc8ab4d76c34399522.png
[74eecfbe5d324e8eb0fb4c6690d0e4e8.png]: https://img-blog.csdnimg.cn/74eecfbe5d324e8eb0fb4c6690d0e4e8.png
[58b8394c11814716961304e146a6c6ff.png]: https://img-blog.csdnimg.cn/58b8394c11814716961304e146a6c6ff.png
[154eafc85a294b64ae8fbe52c1186dcf.png]: https://img-blog.csdnimg.cn/154eafc85a294b64ae8fbe52c1186dcf.png
[15188c0d6d5b4517bc79f16e5925a6de.png]: https://img-blog.csdnimg.cn/15188c0d6d5b4517bc79f16e5925a6de.png
[aaee89b1a5e14601a6bbe24056b717fd.png]: https://img-blog.csdnimg.cn/aaee89b1a5e14601a6bbe24056b717fd.png
[494ee80e905e4e7aa26c7466dccdab51.png]: https://img-blog.csdnimg.cn/494ee80e905e4e7aa26c7466dccdab51.png