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

Vue表单基本操作-收集表单数据

news 2025/11/7 6:02:46

收集表单数据

使用vue中的v-model收集表单里面的数据，不同的表单元素配合v-model会有不同的写法和技巧
本次的表单元素包括：文本框，单选，多选，下拉框，文本域

编写表单元素

首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域

input输入框细节

这里有一个细节(小技巧)：表单编写input输入框的时候，通常会配合label标签使用并加上相关的css或或者js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是v-model获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别

不加上lable

在这里插入图片描述

页面的交互性很差，必须自己点击输入框才能获取到光标

在这里插入图片描述

加上lable

在这里插入图片描述

查看页面，点击账号会跳进对应的输入框并获取光标

在这里插入图片描述

继续编写表单元素

在这里插入图片描述

查看页面

在这里插入图片描述

表单元素到此就写完了，接下来就要把表单交给vue管理并收集数据了

text输入框和password输入框

这两个比较简单，定义两个变量绑定在输入框里面

在这里插入图片描述

在这里插入图片描述

radio单选按钮

接下来就是性别，也就是radio单选按钮，多个单选按钮，但是只能选中一个单选按钮

错误示例

如果直接简单粗暴的定义变量使用v-model绑定单选框，是不行的

在这里插入图片描述

页面上获取不到选中的值，为什么会这样的？因为v-model默认收集的是输入框的value,但是目前单选框是没有value的，所以获取不到

在这里插入图片描述

正确示例

给单选按钮赋值value属性即可，注意：value不要重复

在这里插入图片描述

在这里插入图片描述
如果想要某一个单元按钮默认选中，可以在属性赋默认值

在这里插入图片描述

男默认选中

在这里插入图片描述

checkbox多选框

错误示例

和单选框一样，不能直接定义属性使用v-model

在这里插入图片描述

可以看到收集到的是一个布尔值

在这里插入图片描述

这个错误和单元框一致，也是没value造成的，至于为什么是布尔值，vue获取的是这一组复选框里面的checked，所以只要选中了就是true，不然就是false

那么给复选框赋上value再试试

在这里插入图片描述

发现还是不行

在这里插入图片描述

哎，为什么给复选框配置了value属性还是不行呢？

因为复选框的初始值能够影响到收集到的数据，如果把复选框的属性错误的写成了字符串，那么就算配置了value值也不行

正确示例

注意：如果需要获取复选框的值，可以使用这种写法，如果只需要判断是否被选中，也就是true或false，可以参考下面的另外一种使用方式

多组复选框属性应该写成一个数组

在这里插入图片描述

这样就好了

在这里插入图片描述

select下拉框

select下拉框就比较正常了，和正常的输入框是一样的

在这里插入图片描述

在这里插入图片描述

如果想要上来就默认选中，也是和单选框一样的

在这里插入图片描述

在这里插入图片描述

textarea多行输入框

textarea多行输入框本质来说也是输入框，写法和正常文本框是一样的

在这里插入图片描述

在这里插入图片描述

相关文章：

Vue表单基本操作-收集表单数据

收集表单数据 使用vue中的v-model收集表单里面的数据，不同的表单元素配合v-model会有不同的写法和技巧 本次的表单元素包括：文本框，单选，多选，下拉框，文本域 编写表单元素 首先编写表单元素，…...

编程日记 2023/4/24 8:18:04

Android 一个获取网址时间的Demo

Android 一个获取网址时间的Demo 文章目录 Android 一个获取网址时间的Demo通过一个网址获取时间的代码关于Android NTP 时间Android 同步时间代码 前段时间有个客户想用局域网同步Android 设备的时间，开发后把这个demo分享一下。 效果： 这里也获取了阿…...

编程日记 2023/4/24 8:13:03

ijkplayer解码流程源码解读

ijkplayer是一款基于ffmpeg的在移动端比较流行的开源播放器。FFmpeg是一款用于多媒体处理、音视频编解码的自由软件工程，采用LGPL或GPL许可证。 要想理解ijkplayer源码，首先得知道视频播放器的基本原理。 视频播放器播放一个互联网上的视频文件&#xf…...

编程日记 2023/5/30 5:50:34

2023年值得关注的3个品牌趋势，帮你弯道超车

2023年，大环境开放，压抑三年的消费蓄势待发，品牌如何唤醒消费者的、热情成了重中之重的大事。 春风和煦，万物生长。又到了各类品牌、各位营销人踌躇满志、斗志昂扬的时候了，浅析一下2023品牌宣传趋势，抓住…...

编程日记 2023/4/24 8:03:01

软考-高级项目管理(二十)

第20章 高级项目管理 (P572考0-2分选择 性价比很低) 在项目集管理中涉及的相关角色主要包括: 项目集发起人、项目集指导委员会、项目集经理、其他影响项目集的干系人 1.项目集发起人 项目集发起人和收益人是负责承诺将组织的资源应用于项目集，并致力于使项目集取得…...

编程日记 2023/6/1 4:28:19

RTMP协议深度解析：从原理到实践，掌握实时流媒体传输技术

目录标题 1. 引言1.1 流媒体传输技术的重要性1.2 为什么选择RTMP协议1.3 RTMP协议的发展与应用 2. RTMP协议基础2.1 RTMP协议简介2.2 RTMP协议与其他流媒体协议的比较2.3 RTMP协议的组成与工作原理 3. RTMP协议详解3.1 RTMP数据单元（Message）3.2 RTMP数据…...

编程日记 2023/4/24 7:52:58

2023mathorcup数学建模ABCD思路分析

更多思路分析，请看文末 A题：量子计算机在信用评分卡组合优化中的应用 题目提到了信用评分卡的组合优化，这是一个经典的优化问题。在这个问题中，需要通过不同的组合方式来选择不同的阈值，以达到最大化贷款利息收入和最…...

编程日记 2023/4/24 7:47:52

普通家庭，千万不要投入大量时间和金钱，让孩子去苦学和培养AI机器人编程了...

普通家庭，千万不要投入大量时间和金钱，让孩子去苦学和培养一些看似高端，实际却用处不大的兴趣爱好课程了，比如学钢琴、学音乐、学AI机器人编程这些兴趣爱好课程。 这些对孩子的成长其实意义并不大，尤其是AI机器人编程。…...

编程日记 2023/4/24 7:42:51

C++学习（day2）

文章目录 四. C中的字符串4.1 C支持两种风格的字符串4.2 string类型的赋值和初始化4.3 C风格和C风格的字符串互换4.4 string类中三个重要成员函数4.5 string类型的比较4.6 string类型的成员访问 at()6.8 string类型数据的输入 五、bool类型六、引用（reference&#…...

编程日记 2023/4/24 7:37:50

软考 - IP地址与网络划分

一.IP组成 1.1 首个八位字节规则 1.2 地址掩码 IP地址掩码 标准地址掩码 A类：255.0.0.0 前1个字节是网络号 后3个字节是主机号 B类：255.255.0.0 前2个字节是网络号 后2个字节是主机号 C类；255.255.255.0 前3个字节是网络号 后1个字节是主机号…...

编程日记 2023/4/24 7:32:48

Apifox软件的基础使用方式

Apifox软件的基础使用方式 简单方便的用途 该工具是接口在线调试工具，这里我给到连接供大家去官网下载，我个人觉得是比较于postman工具好用，提供的语言操作是中文版本的便于操作 下载和安装 https://apifox.com/?utm_sourcebaidu&ut…...

编程日记 2023/4/24 7:27:47

【Tensorflow】模型如何加载HDF文件数据集？

如果每个样本都被保存为一个单独的 HDF5 文件，可以使用 tf.data.Dataset.list_files 函数来创建一个文件名数据集，然后使用 tf.data.Dataset.interleave 函数来并行读取多个文件。 下面的示例展示了如何从多个 HDF5 文件中读取数据并创建一个 tf.data.D…...

编程日记 2023/4/24 7:22:46

校招又临近了，怎么在面试中应对设计模式相关问题呢？

夏天开始了，那么夏天结束时的毕业季也不远了。毕业是个伤感、期待而又略带残酷的时节，就像蜜桃无论成熟与否都会在这个时间被采摘，如果毫无准备就踏入社会，就会……马上变成低级社畜。所以说还是要早点为了毕业找工作做点准备&…...

编程日记 2023/4/24 7:17:45

padans关于数据处理的杂谈

情况：业务数据基本字段会有如下： Index([时间, 地区, 产品, 字段, 数值], dtypeobject)这样就会引发一个经典“三角不可能定理”，如何同时简约展现分时序、分产品、分字段数据。）一般来说， 1、时序为作为单独的分类&…...

编程日记 2023/5/31 0:59:58

神经网络的理解

文章目录 概念得分函数损失函数神经网络结构非线性激活函数神经网络运行过程神经网络能够做的事情概念 人工神经网络（Artificial Neural Networks，简写为ANNs）也简称为神经网络（NNs）或称作连接模型（Connection Model），它是一种模仿动物神经网络行为特征，进行分布式并…...

编程日记 2023/4/24 7:07:43

夏驰和徐策带你从零开始学数据结构——哈希表

哈希表的概念： 哈希表是一种常用的数据结构，它可以在 O(1) 的时间复杂度内执行插入、查找和删除操作。哈希表的核心思想是使用哈希函数将键值对映射到数组中的一个位置上，从而实现快速的访问和修改。 哈希表由两个主要部分组成：…...

编程日记 2023/4/24 7:02:41

linux实现网络程序

1️⃣ 在linux下，通过套接字实现服务器和客户端的通信。 2️⃣ 实现单线程、多线程通信。或者实现线程池来通信。 3️⃣ 优化通信，增加守护进程。 有情提醒，类里面默认的函数是内联。内联函数在调用的地方展开，没有函数地址&…...

编程日记 2023/4/24 6:57:40

FreeRTOS 队列（二）

文章目录 一、向队列发送消息1. 函数原型（1）函数 xQueueOverwrite()（2）函数 xQueueGenericSend()（3）函数 xQueueSendFromISR()、xQueueSendToBackFromISR()、xQueueSendToFrontFromISR()（4&…...

编程日记 2023/6/1 11:52:02

用python获取当前目录下的创建时间超过3天的所有python文件

直接上代码： import os import datetime print(os.getcwd()) # 获取当前目录下所有的html文件 html_files [] for filename in os.listdir(): if filename.endswith(.py): html_files.append(os.path.join(., filename)) now date…...

编程日记 2023/4/24 6:47:33

第五章 Linux实际操作——用户管理

第五章 Linux实际操作——用户管理 5.1 基本介绍5.2 添加用户5.3 指定、修改密码5.4 删除用户5.5 查询用户信息指令5.6 切换用户5.7 查看当前用户、登录用户5.8 用户组5.9 用户和组相关文件8.9.1/etc/passwd 文件8.9.2/etc/shadow文件8.9.3/etc/group文件 5.1 基本介绍 Linux系…...

编程日记 2023/4/24 6:42:32

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2025/11/1 2:53:34

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/8/16 7:00:37

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...

编程新知 2025/11/3 4:47:37

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/10/27 13:41:34

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/10/26 2:48:36

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

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

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

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/10/30 13:55:55

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22

客户案例 | 短视频点播企业海外视频加速与成本优化：MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

编程新知 2025/10/28 6:48:33