Vue收集表单数据，过滤器

最新推荐文章于 2023-12-18 22:10:48 发布

嘤嘤鸭

最新推荐文章于 2023-12-18 22:10:48 发布

阅读量212

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43427995/article/details/127407000

版权

本文介绍了在Vue.js中如何收集表单数据，包括不同类型的表单元素如何使用v-model以及其修饰符lazy、number和trim。同时，文章详细讲解了过滤器的用法，如注册和使用过滤器，以及过滤器处理数据的特点，如不改变原始数据，可以接受额外参数和串联使用。

摘要由CSDN通过智能技术生成

收集表单数据

若：

- 则v-model收集的是value值，用户输入的就是value值
- 则v-model收集的是value值，且要给标签配置value值
- 没有配置input的value属性那么收集的就是checked(勾选[true] or未勾选[false]) - 配置了input的value值 - v-model的初始值是非数组，那么收集的就是checked - v-model的初始值是数组，那么收集的就是value组成的数组
v-model三个修饰符
- lazy:失去焦点再收集数据
- number:输入字符串转为有效数字
- trim:输入首尾空格过滤

<div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"> <br><br>
            密码：<input type="password" v-model="userInfo.password"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            性别：男<input type="radio"