Vue核心 收集表单数据 过滤器
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. 收集表单数据 收集表单数据: 若: ，则v-model收集的是value值，用户输入的就是value值。若: ，则v-model收集的是value值，且要给标签配置value值。若: 没有配置input的value属性，那么收集的就是checked(勾选 or 未…...
华为EC6108V9E／EC6108V9I_rk3228_安卓4.4.4_通刷_卡刷固件包
华为EC6108V9E／EC6108V9I_rk3228_安卓4.4.4_通刷_卡刷固件包-内有教程 特点： 1、适用于对应型号的电视盒子刷机； 2、开放原厂固件屏蔽的市场安装和u盘安装apk； 3、修改dns，三网通用； 4、大量精简内置的…...
数字化转型导师坚鹏：面向数字化转型的大数据顶层设计实践
面向数字化转型的大数据顶层设计实践 课程背景： 数字化背景下，很多企业存在以下问题： 不清楚大数据思维如何建立？ 不清楚企业大数据分析方法？ 不了解大数据应用成功案例？ 课程特色： …...
day27_mysql
今日内容 零、 复习昨日 一、单表查询 二、多表联查 零、 复习昨日 1 DDL,DML,DQL是啥 DDL 数据定义语言（库，表，列）DML 数据操作语言（表内数据的操作增删改）DQL 数据查询语言（表内数据的查询&am…...
QwtPlotCurve使用说明
QwtPlotCurve是Qwt库中用于绘制曲线的类，可以在QwtPlot上绘制各种类型的曲线，如折线、样条线、散点等。以下是QwtPlotCurve的一些常用函数和使用说明： setSamples(const QPolygonF &samples)：设置曲线的数据点，参数…...
JS逆向 -- 某平台登录加密分析
一、打开网站，使用账号密码登录 账号：aiyou123.com 密码：123456 二、通过F12抓包，抓到如下数据，发现密码加密了 三、加密结果是32位，首先考虑是md5加密。 四、全局搜索pwd，点击右上角…...
一分钟快速实现Flask框架的蓝图和视图
一分钟快速实现Flask框架的蓝图和视图 Flask是一个轻量级的Web应用框架，非常适合快速开发小型的Web应用。Flask框架使用蓝图（Blueprint）和视图（View）的概念来组织应用程序的代码。在本文中，我们将介绍如何…...
Mysql 约束练习【第13章_约束】
#第13章_约束 /* 基础知识 1.1 为什么需要约束？ 为了保证数据的完整性！ 1.2 什么叫约束？对表中字段的限制。 1.3 约束的分类： 角度1：约束的字段的个数 单列约束 vs 多列约束 角度2：约束的作用范围 列…...
java调用cmd命令
1.首先，我们需要了解一下 java是如何调用 cmd的： 6.在实际的开发中，我们有可能会遇到 java调用 cmd命令的情况： 7.对于一些特定的环境下，例如在嵌入式系统中，那么我们可以使用下面这种方式来调用 cmd命令&a…...
Qt音视频开发36-超时检测和自动重连的设计
一、前言 如果网络环境正常设备正常，视频监控系统一般都是按照正常运行下去，不会出现什么问题，但是实际情况会很不同，奇奇怪怪七七八八的问题都会出现，就比如网络出了问题都有很多情况（交换机故障、网线故障、带宽故障等），所以监控系统在运行过程中，还得做超时检测，…...
Reactor 第九篇 WebFlux重构个人中心，效果显著
1 重构背景 原有的开发人员早已离职，代码细节没人知道，经过了一段时间的维护，发现有以下问题： 个人中心系统的特征就是组装各个业务的接口，输出个人中心业务需要的数据，整个系统调用了几十个第三方业务线的…...
Vben Admin 自学记录 —— Drawer组件的基本使用及练习（持续更新中...）
Drawer 抽屉组件 对 antv 的 drawer 组件进行封装，扩展拖拽，全屏，自适应高度等功能。 Drawer相关使用及概念 练习 —— 在之前table基础上，添加查看功能，点击查看按钮，弹出抽屉显示单条表格数据…...
Android 9.0 根据包名默认授予app悬浮窗权限
1.概述 在9.0的设备开发中，对于在app中授予悬浮窗权限，也是通常用的功能，但在设备产品中预制app,需求要求默认授予悬浮窗权限， 就不需要在app中动态申请悬浮窗权限了，所以就来分析下这个实现这个功能 2.根据包名默认授予app悬浮窗权限的核心类 packages\apps\Settings\s…...
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,…...
【微软Bing王炸更新】无需等待，人人可用，答案图文并茂，太牛了
🚀 AI破局先行者 🚀 🌲 AI工具、AI绘图、AI专栏 🍀 🌲 如果你想学到最前沿、最火爆的技术，赶快加入吧✨ 🌲 作者简介：硕风和炜，CSDN-Java领域优质创作者🏆&am…...
腾讯云的cdn怎么配置|腾讯云CDN配置教程
众所周知，WordPress系统不挂加速或者是服务器不好速度贼慢，所以要想办法解决访问速度的问题，经过我不断的研究腾讯云的CDN，因为我用的是zibll子比主题，不懂的就挂会导致无法使用第三方登录，因为有缓存导致一直不回调一直卡在那个登录界面和支付没反应要么出现二维码，要么…...
数据结构入门-顺序表链表
线性表 线性表（linear list）是n个具有相同特性的数据元素的有限序列。线性表是一种实际中广泛使用多个数据结构，常见的线性表：顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构，也就说是连续的一条直线。…...
【AWS入门】AWS Lamda
目录 创建一个Lamda函数用Lamda函数控制启停EC2实例创建一台EC2实例创建角色创建lamda函数 使用Amazon EventBridge计划启停实例创建EventBridge 用户往S3存储桶上传图片文件，触发Lambda函数，将图片压缩并上传至另一个存储桶创建两个存储桶通过Cloudform…...
牛客刷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： between......and.......包括边界。 踩坑2&am…...
【Errors】【计算机图形学】A-SDF复现的一点纠正记录
ICCV 2021的工作A-SDF，在跑的过程中可能是一些版我Run了这篇工作代码的Reconstruction，然后出现了一点小小的错误，记录如下。 问题一：对数据做直接修改导致出错（可能是不同的pytorch版本导致的?） 错误描述…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式： 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...