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

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

news 2026/5/16 16:12:45

收集表单数据

使用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

MobaXterm远程桌面实战：在Ubuntu上配置与连接RDP服务

1. 为什么选择MobaXterm连接Ubuntu远程桌面 作为一名常年和Linux服务器打交道的开发者，我深知纯命令行操作有时会遇到效率瓶颈。特别是当需要处理图形界面应用或者进行复杂配置时，SSH终端就显得力不从心了。这时候，RDP远程桌面协议就成了救命…...

编程新知 2026/5/16 15:51:10

SAP屏幕导航：从SET到LEAVE，实战解析六大跳转策略

1. SAP屏幕导航的核心逻辑 在SAP ABAP开发中，屏幕导航就像是在迷宫中寻找出口。想象你手里有六把不同的钥匙（六种跳转策略），每把钥匙对应不同的门锁（业务场景）。选错钥匙要么打不开门，要么可能把…...

编程新知 2026/5/16 13:52:06

大疆C板实战：基于BMI088与Mahony算法的实时姿态解算实现

1. 从零开始搭建姿态解算系统 第一次接触大疆C板的时候，我被它精致的做工和丰富的接口惊艳到了。这块开发板简直就是为机器人开发者量身定做的，特别是内置的BMI088惯性测量单元(IMU)，让我们不用再为传感器选型和电路设计发愁。不过说实话&…...

编程新知 2026/5/16 13:02:56

开源工作流引擎ByteChef：从组件化架构到自动化编排实战

1. 项目概述：一个面向开发者的自动化工作流引擎如果你是一名开发者，或者经常需要处理跨系统、跨应用的数据同步、定时任务、API调用编排，那么你大概率对“自动化”有着强烈的需求。我们可能都经历过这样的场景：每天手动从A系统导出…...

编程新知 2026/5/16 12:58:26

问卷星 vs 腾讯问卷 vs 金数据：2026主流问卷工具AI开放能力最新横评

作为问卷调研行业的深度观察者，老N近期注意到调研工具链正在发生一场静悄悄的革命。最近，问卷星正式上线了AI工具包（wjx-ai-kit），其CLI（命令行工具）支持多达67个子命令，并适配了Clau…...

编程新知 2026/5/16 12:45:29

桌面端酷安社区体验：Coolapk UWP 完整使用指南

桌面端酷安社区体验：Coolapk UWP 完整使用指南 【免费下载链接】Coolapk-UWP 一个基于 UWP 平台的第三方酷安客户端 项目地址: https://gitcode.com/gh_mirrors/co/Coolapk-UWP 你是否曾经希望在电脑大屏幕上舒适地浏览酷安社区，摆脱手机小屏幕的…...

编程新知 2026/5/16 12:13:58

终极MifareOneTool使用指南：零基础玩转MIFARE经典卡的Windows图形化神器

终极MifareOneTool使用指南：零基础玩转MIFARE经典卡的Windows图形化神器 【免费下载链接】MifareOneTool A GUI Mifare Classic tool on Windows（停工/最新版v1.7.0） 项目地址: https://gitcode.com/gh_mirrors/mi/MifareOneTool 想要…...

编程新知 2026/5/16 11:43:35

2026年5月AI Agent技术全景：多模态与自主决策的范式跃迁

核心结论：2026年5月，AI Agent技术正在从"工具调用"向"自主决策"跃迁。六大趋势——多模态感知、长期记忆、多Agent协作、安全对齐、开发者生态、边缘部署——正在重塑Agent技术栈。12大主流框架（LangGraph、AutoGPT、Met…...

编程新知 2026/5/16 10:57:54

从LED驱动到继电器控制：深入解析NPN与PNP三极管在电路设计中的选型避坑指南

从LED驱动到继电器控制：深入解析NPN与PNP三极管在电路设计中的选型避坑指南 在电子电路设计中，三极管作为基础却关键的元件，其选型直接影响着电路的可靠性和性能。特别是当我们需要驱动LED、继电器或电机等负载时，NPN与PNP三极管的…...

编程新知 2026/5/16 10:06:55

忘记压缩包密码怎么办？5分钟学会用ArchivePasswordTestTool找回密码

忘记压缩包密码怎么办？5分钟学会用ArchivePasswordTestTool找回密码 【免费下载链接】ArchivePasswordTestTool 利用7zip测试压缩包的功能 对加密压缩包进行自动化测试密码 项目地址: https://gitcode.com/gh_mirrors/ar/ArchivePasswordTestTool 你是否曾经…...

编程新知 2026/5/16 9:58:05