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

Vue22-v-model收集表单数据

一、效果图

二、代码

2-1、HTML代码

 

2-2、vue代码

1、v-model单选框的收集信息

v-model:默认收集的就是元素中的value值。

单选框添加默认值:

2、v-model多选框的收集信息

①、多个选择的多选

 

注意:

此处的hobby要是数组!!! 

②、单个选择的多选 

3、数据收集结果:

 

4、点击提交

提交后,控制台打印所有收集信息,但是不要写多个console.log()函数

【方法一】:

 

转成JSON格式:

 

【方法二】:将所有的数据都放到一个userInfo对象中

代价:页面中所有用到v-mode的地方,也要加上userInfo

三、v-model的修饰符

3-1、number修饰符

一般,两个同时使用!!! 

 

3-2、lazy修饰符

失去焦点的一瞬间收集: 

3-3、trim修饰符

 

四、小结

相关文章:

Vue22-v-model收集表单数据

一、效果图 二、代码 2-1、HTML代码 2-2、vue代码 1、v-model单选框的收集信息 v-model:默认收集的就是元素中的value值。 单选框添加默认值: 2、v-model多选框的收集信息 ①、多个选择的多选 注意: 此处的hobby要是数组!&…...

【深度学习】深入解码:提升NLP生成文本的策略与参数详解

文章目录 解码策略解码参数公式解释代码例子区别 更详细的束搜索的解释更详细的例子解释第一步第二步第三步 解码策略和解码参数在自然语言处理(NLP)模型的生成过程中起着不同的作用,但它们共同决定了生成文本的质量和特性。 解码策略 解码…...

Petalinux由于网络原因产生的编译错误(2)--Fetcher failure:Unable to find file

1 Fetcher failure:Unable to find file 错误 如果编译工程遇到如下图所示的“Fetcher failure for URL”或相似错误 出现这种错误的原因是 Petalinux 在配置和编译的时候,需要联网下载一些文件,由于网 络原因这些文件不能正常下载,导致编译…...

随手记:商品信息过多,展开收起功能

UI原型图&#xff1a; 页面思路&#xff1a; 在商品信息最小item外面有一个包裹所有item的标签&#xff0c;控制这个标签的高度来实现展开收起功能 <!-- 药品信息 --><view class"drugs" v-if"inquiryInfoSubmitBtn"><view class"…...

uniapp上传头像并裁剪图片

第一步写上uniapp自带的选择图片button按钮 点击之后会弹出选择图片的方式 拍照或从相册选择图片后将会跳到图片裁剪 然后我们裁剪完之后点击确定在上传图片 这里是上传图片的接口 拿到本地图片 上传的话自己想以那种方式上传都可以...

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程 前情回顾&#xff1a;9.1.2 简单介绍两阶段模型R-CNN、SPPNet、Fast R-CNN、Faster R-CNN的发展过程 摘要 YOLOYOLOv2YOLO9000YOLOv3基本思想使用一个端到端的卷积神经网络直接预测目标的类别和位置针对YOL…...

英智教育智能体,AI Agent赋能教育培训行业数字化升级

教育是当前需求巨大且没有足够人力来满足的领域&#xff0c;每个学生个体差异较大&#xff0c;有限的教师资源无法针对性实行差异教学&#xff0c;学生学不会&#xff0c;教师教学压力大等问题普遍存在。 面对这些难题&#xff0c;英智在通用大模型能力的基础上&#xff0c;整合…...

什么是电脑监控软件?六款知名又实用的电脑监控软件

电脑监控软件是一种专为监控和记录计算机活动而设计的应用程序&#xff0c;它能够帮助用户&#xff08;如家长、雇主或系统管理员&#xff09;了解并管理目标计算机的使用情况。这些软件通常具有多样化的功能&#xff0c;包括但不限于屏幕捕捉、网络行为监控、应用程序使用记录…...

小程序名片怎么生成?AI名片生成器源码系统 为企业店铺创建自己的数字名片

在数字化时代&#xff0c;小程序名片已经成为企业店铺展示自身形象、推广产品和服务的重要工具。分享一个AI名片生成器源码系统春哥AI雷达智能名片小程序系统企业商业运营版&#xff0c;含完整代码包和详细的图文安装部署搭建教程&#xff0c;新手也能轻松使用&#xff0c;源码…...

浅谈PMP:项目管理的专业化认证

引言&#xff1a; 项目管理作为现代企业运营的核心环节&#xff0c;其重要性不言而喻。随着全球化的加速和市场竞争的加剧&#xff0c;企业对项目管理的需求日益增长&#xff0c;项目管理专业人员的需求也水涨船高。在这样的背景下&#xff0c;PMP&#xff08;Project Managem…...

获取闲鱼商品详情api

要使用闲鱼商品详情API&#xff0c;你需要先申请一个开发者账号&#xff0c;并且在开发者中心创建一个应用&#xff0c;目前很难申请到&#xff0c;还有一个方式是获取第三方应用的AppKey和AppSecret直接使用。 API的请求地址为&#xff1a; https://api.m.taobao.com/h5/mto…...

java1.8运行arthas-boot.jar运行报错解决

报错内容 输入java -jar arthas-boot.jar&#xff0c;后报错。 [INFO] JAVA_HOME: D:\developing\jdk\jre1.8 [INFO] arthas-boot version: 3.7.2 [INFO] Can not find java process. Try to run jps command lists the instrumented Java HotSpot VMs on the target system.…...

每日一练 - IGMP协议与查询器选举机制

01 真题题目 在共享网络中存在多台路由器的情况下&#xff0c;是否是IGMP协议本身负责选举出查询器的角色&#xff1f; A. 正确 B. 错误 02 真题答案 B 03 答案解析 IGMP&#xff08;Internet Group Management Protocol&#xff09;互联网组管理协议&#xff0c;主要用于IP多…...

深入浅出:面向对象软件设计原则(OOD)

目录 前言 1.单一责任原则&#xff08;SRP&#xff09; 2.开发封闭原则&#xff08;OCP&#xff09; 3.里氏替换原则&#xff08;LSP&#xff09; 4.依赖倒置原则&#xff08;DIP&#xff09; 5.接口分离原则&#xff08;ISP) 6.共同封闭原则&#xff08;CCP&#xff09…...

缓存与数据一致性问题

1、更新了数据库&#xff0c;再更新缓存 假设数据库更新成功&#xff0c;缓存更新失败&#xff0c;在缓存失效和过期的时候&#xff0c;读取到的都是老数据缓存。 2、更新缓存&#xff0c;更新数据库 缓存更新成功了&#xff0c;数据库更新失败&#xff0c;是不是读取的缓存的都…...

2024年上海高考作文题目(ChatGPT版)

一、2024年6月7日上海高考作文题目 生活中&#xff0c;人们常用认可度判别事物&#xff0c;区分高下。请写一篇文章&#xff0c;谈谈你对“认可度”的认识和思考。 要求&#xff1a;&#xff08;1&#xff09;自拟题目&#xff1b;&#xff08;2&#xff09;不少于800字。 二、…...

.net 调用海康SDK以及常见的坑解释

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不仅仅是技术还有人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !序言 在工控领域,很多时候需要…...

KVM+GFS高可用

资源列表 操作系统 IP 主机名 Centos7 192.168.10.51 gfs1 Centos7 192.168.10.52 gfs2 Centos7 192.168.10.53 kvm 在gfs节点部署GlusterFS #添加hosts解析 cat >> /etc/hosts << EOF 192.168.10.51 gfs1 192.168.10.52 gfs2 192.168.10.53 kvm EOF …...

C++迈向精通:当我尝试修改虚函数表

尝试修改虚函数表 本期纯整活儿好吧&#xff01;&#xff01;&#xff01;&#xff01; 初衷 有一天我突然开始好奇虚函数表是否真的存在&#xff0c;于是我开始想是否能够从C中查看或者调用虚函数表中的内容。&#xff0c;于是有了下面的操作。 操作过程 起初我并没有思路…...

IDEA 高效插件工具

文章目录 LombokMaven Helper 依赖冲突any-rule(正则表达式插件)快速生成javadocGsonFormat (Aits) 将json解析成类Diagrams使用 类图SequenceDiagram时序图GenerateAllSetter&#xff08;AltEnter&#xff09;大小写转写String ManipulationGitToolBox 代码提交人activate-pow…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...