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

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

news 2026/2/10 7:54:03

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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25