在Vue中如何收集表单信息？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，[点击查看活动详情] (juejin.cn/post/709970… "juejin.cn/post/709970…")

收集表单数据

若:input type="text"/ ,则v-model收集的是value值，用户输入的就是value值

若input type="radio"/ ，则v-model收集的是value值，且要给标签配置value值

若input type="checkbox"/

1. ​ 没有配置input 的value实行，那么收集的就是checked （勾选 或者 未勾选 是布尔值）
2. 配置input 的value属性：

• v-model的出事值是非数组，那么收集的就是checked（勾选 或者 未勾选 是布尔值）
• v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效数字

trim：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

语法：

1. 注册过滤器：Vue.filter(name,callback) 或 new Vue（filters:{}）
2. 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

1. 过滤器也可以接受额外参数，多个过滤器也可以串联
2. 并没有改变原本的数据，时产生新的对应的数据

我们学过的指令

v-bind ：单向绑定解析表达式，可简写为：xxx

v-model ：双向数据绑定

v-for：遍历数组/对象/字符串

v-on ：绑定事件监听，可简写为@

v-if：条件渲染（动态控制节点是否存在）

v-else：条件渲染（动态控制节点是否存在）

v-show：条件渲染（动态控制节点是否展示）

v-test指令：

1. 作用，向其所在的节点中渲染文本内容
2. 与插值语法的区别：v-test会替换掉节点的内容{{xx}}则不会