当前位置: 首页 > 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…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

DeepSeek越强,Kimi越慌?

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...