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

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

news 2026/3/29 7:01:56

收集表单数据

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

RTX4090D大模型推理专用镜像体验：Qwen-Image预装环境，一键启动图文对话

RTX4090D大模型推理专用镜像体验：Qwen-Image预装环境，一键启动图文对话 1. 镜像概述与核心优势 1.1 为什么选择专用镜像 在本地部署大语言模型时，环境配置往往是最耗时的环节。以Qwen-VL这样的视觉语言模型为例，需要处理CUDA版…...

编程新知 2026/3/29 5:25:59

IndexTTS 2.0情感控制效果：用自然语言描述生成对应语气语音

IndexTTS 2.0情感控制效果：用自然语言描述生成对应语气语音 1. 引言：语音合成的革命性突破 想象一下这样的场景：你正在制作一部动画短片，主角需要说一句"我受够了！"——但你不只是想让它"说出来"…...

编程新知 2026/3/29 5:07:48

告别手动复制！Mac版PowerPoint备注导出神器：自定义AppleScript脚本全解析

Mac版PowerPoint备注导出神器：AppleScript脚本开发实战指南 每次在会议前整理PPT备注时，你是否也厌倦了手动复制粘贴的繁琐操作？作为一位长期使用Mac和PowerPoint的资深用户，我深刻理解这种效率低下的痛苦。本文将带你深入探索如何…...

编程新知 2026/3/29 2:44:12

Thing.Core：面向嵌入式IoT的声明式C++框架

1. Thing.Core 框架概述：面向嵌入式 IoT 开发的声明式抽象层Thing.Core 是一个专为物联网终端设备快速开发而设计的轻量级 C 框架，其核心设计理念是生产力优先于极致性能。这一取舍在当前 ESP32、ESP8266、nRF52840 等高性能 MCU 广泛普及的背景下具有明…...

编程新知 2026/3/29 2:42:12

League Toolkit：重新定义英雄联盟游戏体验的智能辅助工具集

League Toolkit：重新定义英雄联盟游戏体验的智能辅助工具集 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的…...

编程新知 2026/3/29 1:59:46

汽车ECU BootLoader开发：基于CAN总线与MPC57XX系列MCU

汽车ECU BootLoader开发基于CAN总线通信MPC57XX系列MCU bootloader开发 文档54页 在汽车电子领域，ECU（Electronic Control Unit）的重要性不言而喻，而BootLoader则是ECU中关键的一环。今天咱们就来聊聊基于CAN总线通信&#xff0c…...

编程新知 2026/3/29 0:13:03

QUARTUS 2 基本操作使用（quartus13.0）

本文从建立完工程开始，到下载结束 编写设计文件 点击Files，可以添加设计文件 设置工程顶层 ​编辑 再此介绍下工具栏，只介绍用的多的 绑定引脚：fpga大部分引脚都是GPIO，因此给他编辑代码后（赋予他功能&am…...

编程新知 2026/3/28 23:44:56

7个强力策略！Seafile插件市场终极推广指南：提升曝光与用户采纳率全攻略

7个强力策略！Seafile插件市场终极推广指南：提升曝光与用户采纳率全攻略 【免费下载链接】seafile High performance file syncing and sharing, with also Markdown WYSIWYG editing, Wiki, file label and other knowledge management features. 项目…...

编程新知 2026/3/28 23:20:39

Font-Awesome-SVG-PNG 核心原理：深入解析SVG到PNG的转换机制

Font-Awesome-SVG-PNG 核心原理：深入解析SVG到PNG的转换机制 【免费下载链接】Font-Awesome-SVG-PNG Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator 项目地址: https://gitcode.com/gh_mirrors/fo/…...

编程新知 2026/3/28 22:54:16

一文搞懂：Agent、Harness Engineering、MCP、Skill 到底是什么

🧭 你是否被这些词搞晕过？ Agent Harness Engineering MCP Skill Tool Workflow…… 大模型时代，新概念层出不穷。它们分别是什么？又如何协同工作？ 这篇文章是你的概念地图。 大模型生态：四个核心概…...

编程新知 2026/3/28 22:04:02