当前位置： 首页 > news >正文

Vue核心 收集表单数据 过滤器

news 文章来源：https://blog.csdn.net/weixin_44230693/article/details/130537191 2024/11/16 16:17:56

1.14. 收集表单数据

收集表单数据:

  • 若: ，则v-model收集的是value值，用户输入的就是value值。
  • 若: ，则v-model收集的是value值，且要给标签配置value值。
  • 若:
    • 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
    • 配置input的value属性:
      • v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
      • v-model的初始值是数组，那么收集的的就是value组成的数组
  • v-model的三个修饰符:
    • lazy: 失去焦点再收集数据
    • number: 输入字符串转为有效的数字
    • trim: 输入首尾空格过滤
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>收集表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!--收集表单数据:若: <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。若: <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。若: <input type="checkbox"/>1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)2.配置input的value属性:(1).v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)(2).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" name="sex" v-model="userInfo.sex" value="male">女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study">打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br /><br />所属校区<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">成都</option></select><br/><br/>其他信息：<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://www.yuque.com/cessstudy">《用户协议》</a><button>提交</button></form></div><script type="text/javascript">// 阻止vue在启动时生成生产提示Vue.config.productionTip = falsenew Vue({ el: '#root',  	  data:{userInfo: { account: '', password: '', age: 18, sex: 'female', hobby: [], city: 'beijing',other: '', agree: '' }},methods: { demo() { console.log(JSON.stringify(this.userInfo)) } }});</script>
</body>
</html>

在这里插入图片描述

1.15. 过滤器（Vue3 已经移除）

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

注册过滤器：

  • Vue.filter(name, callback) 全局过滤器
  • **new Vue {filters: {}} **局部过滤器

使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

  • 过滤器可以接收额外参数，多个过滤器也可以串联
  • 并没有改变原本的数据，而是产生新的对应的数据
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>过滤器</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body><!--过滤器:定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)语法: 1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:}2.使用过滤器: {( xxx | 过滤器名}} 或 v-bind:属性 = “xxx过滤器名"备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据，是产生新的对应的数据--><!-- 准备好一个容器 --><div id="root"><h2>时间</h2><h3>当前时间戳：{{time}}</h3><!-- 计算属性实现 --><h3>现在是: {{fmtTime}}</h3><!-- methods实现 --><h3>现在是: {{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>转换后时间：{{time | timeFormater()}}</h3><!-- 过滤器实现(传参) --><h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3><h3>截取年月日：{{time | timeFormater() | mySlice}}</h3><h3 :x="msg | mySlice">liqb</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div><script type="text/javascript">// 阻止vue在启动时生成生产提示Vue.config.productionTip = false// 全局过滤器 Vue.filter('mySlice',function(value){return value.slice(0,11);})new Vue({ el: '#root',  	  data:{time:1626750147900,msg: 'li qi bin love fan wen yu'},computed:{fmtTime(){return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");}},methods:{getFmtTime(){return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");}  },// 局部过滤器filters:{ timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){ return dayjs(value).format(str);},// mySlice(value) {//     return value.slice(0,11);// }}});new Vue({el: '#root2',data: {msg: "li qi bin love fan wen yu"}});</script>
</body>
</html>

在这里插入图片描述

相关文章：

Vue核心 收集表单数据 过滤器

1.14. 收集表单数据 收集表单数据: 若: &#xff0c;则v-model收集的是value值&#xff0c;用户输入的就是value值。若: &#xff0c;则v-model收集的是value值&#xff0c;且要给标签配置value值。若: 没有配置input的value属性&#xff0c;那么收集的就是checked(勾选 or 未…...

编程日记 2023/5/8 10:44:57

华为EC6108V9E／EC6108V9I_rk3228_安卓4.4.4_通刷_卡刷固件包

华为EC6108V9E&#xff0f;EC6108V9I_rk3228_安卓4.4.4_通刷_卡刷固件包-内有教程 特点&#xff1a; 1、适用于对应型号的电视盒子刷机&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、修改dns&#xff0c;三网通用&#xff1b; 4、大量精简内置的…...

编程日记 2023/5/8 10:39:56

数字化转型导师坚鹏：面向数字化转型的大数据顶层设计实践

面向数字化转型的大数据顶层设计实践 课程背景&#xff1a; 数字化背景下&#xff0c;很多企业存在以下问题&#xff1a; 不清楚大数据思维如何建立&#xff1f; 不清楚企业大数据分析方法&#xff1f; 不了解大数据应用成功案例&#xff1f; 课程特色&#xff1a; …...

编程日记 2023/5/8 10:34:55

day27_mysql

今日内容 零、 复习昨日 一、单表查询 二、多表联查 零、 复习昨日 1 DDL,DML,DQL是啥 DDL 数据定义语言&#xff08;库&#xff0c;表&#xff0c;列&#xff09;DML 数据操作语言&#xff08;表内数据的操作增删改&#xff09;DQL 数据查询语言&#xff08;表内数据的查询&am…...

编程日记 2023/5/8 10:29:54

QwtPlotCurve使用说明

QwtPlotCurve是Qwt库中用于绘制曲线的类&#xff0c;可以在QwtPlot上绘制各种类型的曲线&#xff0c;如折线、样条线、散点等。以下是QwtPlotCurve的一些常用函数和使用说明&#xff1a; setSamples(const QPolygonF &samples)&#xff1a;设置曲线的数据点&#xff0c;参数…...

编程日记 2023/5/30 0:00:37

JS逆向 -- 某平台登录加密分析

一、打开网站&#xff0c;使用账号密码登录 账号&#xff1a;aiyou123.com 密码&#xff1a;123456 二、通过F12抓包&#xff0c;抓到如下数据&#xff0c;发现密码加密了 三、加密结果是32位&#xff0c;首先考虑是md5加密。 四、全局搜索pwd&#xff0c;点击右上角&#xf…...

编程日记 2023/5/8 10:19:51

一分钟快速实现Flask框架的蓝图和视图

一分钟快速实现Flask框架的蓝图和视图 Flask是一个轻量级的Web应用框架&#xff0c;非常适合快速开发小型的Web应用。Flask框架使用蓝图&#xff08;Blueprint&#xff09;和视图&#xff08;View&#xff09;的概念来组织应用程序的代码。在本文中&#xff0c;我们将介绍如何…...

编程日记 2023/5/8 10:14:49

Mysql 约束练习【第13章_约束】

#第13章_约束 /* 基础知识 1.1 为什么需要约束&#xff1f; 为了保证数据的完整性&#xff01; 1.2 什么叫约束&#xff1f;对表中字段的限制。 1.3 约束的分类&#xff1a; 角度1&#xff1a;约束的字段的个数 单列约束 vs 多列约束 角度2&#xff1a;约束的作用范围 列…...

编程日记 2023/5/8 10:09:47

java调用cmd命令

1.首先&#xff0c;我们需要了解一下 java是如何调用 cmd的&#xff1a; 6.在实际的开发中&#xff0c;我们有可能会遇到 java调用 cmd命令的情况&#xff1a; 7.对于一些特定的环境下&#xff0c;例如在嵌入式系统中&#xff0c;那么我们可以使用下面这种方式来调用 cmd命令&a…...

编程日记 2023/5/8 10:04:47

Qt音视频开发36-超时检测和自动重连的设计

一、前言 如果网络环境正常设备正常，视频监控系统一般都是按照正常运行下去，不会出现什么问题，但是实际情况会很不同，奇奇怪怪七七八八的问题都会出现，就比如网络出了问题都有很多情况（交换机故障、网线故障、带宽故障等），所以监控系统在运行过程中，还得做超时检测，…...

编程日记 2023/5/8 9:59:46

Reactor 第九篇 WebFlux重构个人中心，效果显著

1 重构背景 原有的开发人员早已离职&#xff0c;代码细节没人知道&#xff0c;经过了一段时间的维护&#xff0c;发现有以下问题&#xff1a; 个人中心系统的特征就是组装各个业务的接口&#xff0c;输出个人中心业务需要的数据&#xff0c;整个系统调用了几十个第三方业务线的…...

编程日记 2023/5/29 18:17:33

Vben Admin 自学记录 —— Drawer组件的基本使用及练习（持续更新中...）

Drawer 抽屉组件 对 antv 的 drawer 组件进行封装&#xff0c;扩展拖拽&#xff0c;全屏&#xff0c;自适应高度等功能。 Drawer相关使用及概念 练习 —— 在之前table基础上&#xff0c;添加查看功能&#xff0c;点击查看按钮&#xff0c;弹出抽屉显示单条表格数据&#xf…...

编程日记 2023/5/30 4:44:25

Android 9.0 根据包名默认授予app悬浮窗权限

1.概述 在9.0的设备开发中，对于在app中授予悬浮窗权限，也是通常用的功能，但在设备产品中预制app,需求要求默认授予悬浮窗权限， 就不需要在app中动态申请悬浮窗权限了，所以就来分析下这个实现这个功能 2.根据包名默认授予app悬浮窗权限的核心类 packages\apps\Settings\s…...

编程日记 2023/5/8 9:44:40

Swift中Data,String,[UInt8]的相互转换（6种互相转换）

var dataData() var array[UInt8]() var str"" //Data[UInt8] data.append(10) array[UInt8](data) print(array)//[10] //[UInt8]转Data array[1,2,3,4,5] dataData(array) print(data.count)//5 //Data转String data.removeAll() data.append(contentsOf:[0x31,…...

编程日记 2023/5/8 9:39:40

【微软Bing王炸更新】无需等待，人人可用，答案图文并茂，太牛了

&#x1f680; AI破局先行者 &#x1f680; &#x1f332; AI工具、AI绘图、AI专栏 &#x1f340; &#x1f332; 如果你想学到最前沿、最火爆的技术&#xff0c;赶快加入吧✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;CSDN-Java领域优质创作者&#x1f3c6;&am…...

编程日记 2023/5/8 9:34:38

腾讯云的cdn怎么配置|腾讯云CDN配置教程

众所周知，WordPress系统不挂加速或者是服务器不好速度贼慢，所以要想办法解决访问速度的问题，经过我不断的研究腾讯云的CDN，因为我用的是zibll子比主题，不懂的就挂会导致无法使用第三方登录，因为有缓存导致一直不回调一直卡在那个登录界面和支付没反应要么出现二维码，要么…...

编程日记 2023/5/8 9:29:37

数据结构入门-顺序表链表

线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。线性表是一种实际中广泛使用多个数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线。…...

编程日记 2023/6/1 9:57:40

【AWS入门】AWS Lamda

目录 创建一个Lamda函数用Lamda函数控制启停EC2实例创建一台EC2实例创建角色创建lamda函数 使用Amazon EventBridge计划启停实例创建EventBridge 用户往S3存储桶上传图片文件&#xff0c;触发Lambda函数&#xff0c;将图片压缩并上传至另一个存储桶创建两个存储桶通过Cloudform…...

编程日记 2023/5/8 9:19:34

牛客刷SQL题Day5

SQL69 返回产品并且按照价格排序 select prod_name , prod_price from Products where prod_price between 3 and 6 select prod_name , prod_price from Products where 6>prod_price and prod_price >3 踩坑1&#xff1a; between......and.......包括边界。 踩坑2&am…...

编程日记 2023/5/8 9:14:33

【Errors】【计算机图形学】A-SDF复现的一点纠正记录

ICCV 2021的工作A-SDF&#xff0c;在跑的过程中可能是一些版我Run了这篇工作代码的Reconstruction&#xff0c;然后出现了一点小小的错误&#xff0c;记录如下。 问题一&#xff1a;对数据做直接修改导致出错&#xff08;可能是不同的pytorch版本导致的?&#xff09; 错误描述…...

编程日记 2023/5/8 9:09:32

Dockerfile创建镜像文件

Dockerfile Docker镜像原理 Linux文件系统有bootfs和rootfs两部分组成 Docker镜像由特殊文件系统叠加 最底端bootfs,使用宿主机bootfs 第二次时rootfs,被称为基础镜像 向上可以叠加其他镜像文件 同一文件系统能将多层整合成一层&#xff0c;隐藏了多层存在 镜像可以放置…...

编程日记 2023/6/1 1:57:57

javascript中的严格模式

认识严格模式&#xff1a; 在ECMAScript5标准中&#xff0c;JavaScript提出了严格模式的概念&#xff08;Strict Mode&#xff09;: 严格模式很好理解&#xff0c;是一种具有限制性的JavaScript模式&#xff0c;从而是代码隐式的脱离了“懒散&#xff08;sloppy&#xff09;模…...

编程日记 2023/5/8 8:59:30

（二）【平衡小车制作】电机驱动（超详解）

一、硬件设计 1.直流减速电机   直流减速电机&#xff0c;即齿轮减速电机&#xff0c;是在普通直流电机的基础上&#xff0c;加上配套齿轮减速箱。齿轮减速箱的作用是&#xff0c;提供较低的转速&#xff0c;较大的力矩。  简单的来说&#xff0c;STM32分配两个IO口给一个…...

编程日记 2023/5/8 8:54:28

快速了解车联网V2X通信

自动驾驶拥有极其巨大的潜力&#xff0c;有可能改变我们的出行方式。它不仅有望永远改变车辆的设计和制造&#xff0c;还会永远改变汽车的所有权乃至整个交通运输业务。要实现全自动驾驶的目标&#xff0c;开发人员需要开发极为复杂的软件&#xff0c;软件中融入的人工智能(AI)…...

编程日记 2023/5/8 8:49:27

「Codeforces」D. Infinite Set

D. Infinite Set https://codeforces.com/contest/1635/problem/D 题目描述 你有一个由不同正整数组成的数组和一个无限集 S&#xff0c;现在你需要往集合 S 中塞入所有符合 x x x 条件的数。 x x x 的条件&#xff08;满足其中任意一个即可&#xff09;&#xff1a; x a i …...

编程日记 2023/5/8 8:44:26

项目---基于TCP的高并发聊天系统

目录 服务端 服务端视角下的流程图 一、数据库管理模块 1.1 数据库表的创建 1.2 .对于数据库的操作 1.2.1首先得连接数据库 1.2.2执行数据库语句 1.2.3 返回数据库中存放的所有用户的信息 1.2.4返回数据库中存放的所有用户的好友信息 二、用户管理模块 2.1、UserInfo类&…...

编程日记 2023/5/8 8:39:25

iOS热更新-8种实现方式

一、JSPatch 热更新时&#xff0c;从服务器拉去js脚本。理论上可以修改和新建所有的模块&#xff0c;但是不建议这样做。 建议 用来做紧急的小需求和 修复严重的线上bug。 二、lua脚本 比如&#xff1a; wax。热更新时&#xff0c;从服务器拉去lua脚本。游戏开发经常用到。…...

编程日记 2023/5/8 8:34:24

R语言 | 编写自己的函数

目录 一、正式编写程序 二、设计第一个函数 三、函数也是一个对象 四、程序代码的简化 五、return()函数的功能 六、省略函数的大括号 七、传递多个参数函数的应用 7.1 设计可传递2个参数的函数 7.2 函数参数的默认值 7.3 3点参数“…”的使用 八、函数也可以作为参数 …...

编程日记 2023/5/8 8:29:23

【Java校招面试】基础知识（七）——数据库

目录 前言一、数据库索引二、数据库锁三、数据库事务四、数据库连接池后记 前言 本篇主要介绍数据库的相关内容。 “基础知识”是本专栏的第一个部分&#xff0c;本篇博文是第六篇博文&#xff0c;如有需要&#xff0c;可&#xff1a; 点击这里&#xff0c;返回本专栏的索引文…...

编程日记 2023/5/8 8:24:22

MySQL高级--锁

一、锁 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传统的计算资源&#xff08;CPU、RAM、I/O&#xff09;的争用以外&#xff0c;数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效性是所有数据库必须解决的一个问题…...

编程日记 2023/5/30 17:18:21

网站建设中的思想和算法/济南seo网站优化

File(文件、路径)public static void main(String[] args) throws IOException {//构造方法 无法判断 路径是否存在win下文件夹名称不区分大小写 文件与文件夹不能重名File f new File("D:\a"); //(文件/文件夹)对象//File f new File("D:" File.sepa…...

编程日记 2024/11/16 16:08:08

什么是网络营销策略?/seo指的是什么意思

&#xff08;本文发表于《程序员》2010年3月刊&#xff09; 借鉴丰田方法对大型软件组织进行敏捷改造 &#xff08;上&#xff09; 本文以 ThoughtWorks 中国公司与 某大型 电 信 设备 提供商 合作的 咨询项目 案例 为 背景 &#xff0c; 介 绍 如何采用丰…...

编程日记 2024/11/16 14:32:03

asp伪静态网站如何做筛选/网站标题seo外包优化

承接上文&#xff1a; Docker进阶篇教程&#xff0c;docker-compose, docker swarm, 弹性、扩缩容 Docker进阶篇教程9. 体会swarm弹性、扩缩容9.1 理解扩缩容9.2 docker service命令9.3 理解灰度发布9.4 replicas 3个副本测试9.5 replicas 10个副本测试9.6 scale命令扩缩容1…...

编程日记 2024/11/16 13:31:59

重庆免费网站建设/群排名优化软件官网

我正在用Qt编写一个应用程序&#xff0c;我想用插件扩展它。我的应用程序还有一个插件将使用的库。所以&#xff0c;我需要双向交流。基本上&#xff0c;插件可以调用库&#xff0c;加载插件的应用程序将调用它们。在现在&#xff0c;我的库用C编写&#xff0c;所以它有一些类。…...

编程日记 2024/11/16 9:47:47

做网站要学/热门网站排名

在Java 8中&#xff0c;我们可以在Optional和Stream经常看到map()和flatMap()这两个方法&#xff0c;这两个方法是针对函数式特性引入的&#xff0c;两者功能上看似相近&#xff0c;但其实还是有很大区别的。让我们来了解一下吧。Optional中的比较我们会经常在Optional中使用到…...

编程日记 2024/11/16 6:34:09

运动鞋建设网站前的市场分析/百度商家平台

在成长生活中&#xff0c;我一直在寻找能够提升自我的方法途径。我已经找到了14个最好的技巧可以帮助你更好的提升自我。其中有一些简单方法步骤你可以立即开始去做&#xff0c;还有一些更大的计划你需要更多的努力去完成。 1.每天读书。 书是智慧的源泉。你读的书越多&#xf…...

编程日记 2024/11/16 5:17:07