0
点赞
收藏
分享

微信扫一扫

收集表单数据+过滤器

简单聊育儿 2022-04-24 阅读 81
vue.js

一、收集表单数据

1、效果

在这里插入图片描述

实现:
点击账号的时候,也能够获取到焦点

在这里插入图片描述
在这里插入图片描述

2、实现代码

在这里插入图片描述
在这里插入图片描述

3、接受vue的管理

3.1账号和密码

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 性别

在这里插入图片描述

要想上来就有一个默认值,可以在data里指定一个

在这里插入图片描述

在这里插入图片描述

3.3 爱好

如果不指定value,默认会去使用input框的checked值

在这里插入图片描述

在这里插入图片描述

实现:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 所属校区

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.5 其他信息

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.6 是否同意

不需要指定value值,

在这里插入图片描述

3.7 最终实现

在这里插入图片描述

4.阻止表单提交后的刷新

在这里插入图片描述

5、将数据转化为JSON

有两种方式

方式一:
在这里插入图片描述
在这里插入图片描述

方式二:
在这里插入图片描述
在这里插入图片描述

6、v-model的修饰符

在这里插入图片描述
在这里插入图片描述

6、lazy修饰v-model

不会实时收集,而是在失去焦点的一瞬间开始收集

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7、trim去掉前后空格

在这里插入图片描述

在这里插入图片描述

8、收集表单数据总结

在这里插入图片描述

二、过滤器

将时间格式化

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.1 使用计算属性实现

dayjs() 括号里面不传,默认当前时间去转换

在这里插入图片描述

在这里插入图片描述

2.2 使用methods实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3 使用过滤器实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 过滤器的传参

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
使用es6优化
在这里插入图片描述
在这里插入图片描述

2.5 过滤器之间的串联

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.6 局部过滤器

以上所写过滤器均为局部过滤器,仅在一个vm实例中可以被使用。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

验证是否为局部过滤器

在这里插入图片描述
在这里插入图片描述

2.7 全局过滤器

在这里插入图片描述
在这里插入图片描述

2.8 过滤器的用处

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意:v-model不能绑定过滤器,会报错

在这里插入图片描述
在这里插入图片描述

2.9 总结

在这里插入图片描述
在这里插入图片描述

举报

相关推荐

0 条评论