Vue核心⑩(收集表单数据)

Vue核心⑩(收集表单数据)

文章目录

​​收集表单数据​​​​v-model的三个修饰符​​

​​trim​​​​number​​​​lazy​​

收集表单数据

我们前面在数据绑定的时候就知道可以用v-model的数据双向流动性完成对数据的收集。不过当时我们只是简单的对输入框进行了数据收集。在表单中还有很多其他类型的组件，我们怎么对他们进行数据收集呢？

我们通过一个案例来理解。我们先完成一个表单，并对表单中的信息进行收集：

代码如下：

最后收集到的数据：

收集表单数据： 若：，则v-model收集的是value值，用户输入的就是value值。 若：，则v-model收集的是value值，且要给标签配置value值。 若：

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）（我们在上面的案例中用户协议的那块用的就是这种）配置input的value属性:(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）(2)v-model的初始值是数组，那么收集的的就是value组成的数组(案例中的爱好信息收集用的就是这一种)

v-model的三个修饰符

trim

​​trim​​:输入首位的空格过滤

演示：

账号：

效果：

number

​​number​​：将输入的字符串转化为有效数字

演示：

年龄：

效果：

如果不使用number那么上图中的age那一栏里面显示的是​​”18“​​，这也会造成后期将数据放入到数据库中的时候出现数据类型不匹配而报错的情况。

同时这个修饰符经常与​​type="number"​​搭配使用，两者的区别在于：

​​number​​修饰符控制存入的时候类型是数字型​​type="number"​​控制的是用户输入的时候只能输入数字型

lazy

​​lazy​​:失去焦点再收集数据

演示：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。