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

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

news 2026/2/9 5:24:23

收集表单数据

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

网络编程（Modbus进阶）

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

编程新知 2026/2/9 2:42:51

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...

编程新知 2026/2/5 1:30:05

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

微信小程序云开发平台MySQL的连接方式

注：微信小程序云开发平台指的是腾讯云开发先给结论：微信小程序云开发平台的MySQL，无法通过获取数据库连接信息的方式进行连接，连接只能通过云开发的SDK连接，具体要参考官方文档： 为什么？ 因为…...

编程新知 2026/2/1 5:24:17

今日科技热点速览

🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧。 🤖 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11