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

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

news 2025/10/31 14:12:31

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

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/10/27 13:40:44

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/10/30 1:32:29

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/10/29 21:28:24

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/10/10 9:07:27