Vue表单基本操作-收集表单数据
收集表单数据
使用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会有不同的写法和技巧 本次的表单元素包括:文本框,单选,多选,下拉框,文本域 编写表单元素 首先编写表单元素,…...

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

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

2023年值得关注的3个品牌趋势,帮你弯道超车
2023年,大环境开放,压抑三年的消费蓄势待发,品牌如何唤醒消费者的、热情成了重中之重的大事。 春风和煦,万物生长。又到了各类品牌、各位营销人踌躇满志、斗志昂扬的时候了,浅析一下2023品牌宣传趋势,抓住…...
软考-高级项目管理(二十)
第20章 高级项目管理 (P572考0-2分选择 性价比很低) 在项目集管理中涉及的相关角色主要包括: 项目集发起人、项目集指导委员会、项目集经理、其他影响项目集的干系人 1.项目集发起人 项目集发起人和收益人是负责承诺将组织的资源应用于项目集,并致力于使项目集取得…...
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数据…...
2023mathorcup数学建模ABCD思路分析
更多思路分析,请看文末 A题:量子计算机在信用评分卡组合优化中的应用 题目提到了信用评分卡的组合优化,这是一个经典的优化问题。在这个问题中,需要通过不同的组合方式来选择不同的阈值,以达到最大化贷款利息收入和最…...
普通家庭,千万不要投入大量时间和金钱,让孩子去苦学和培养AI机器人编程了...
普通家庭,千万不要投入大量时间和金钱,让孩子去苦学和培养一些看似高端,实际却用处不大的兴趣爱好课程了,比如学钢琴、学音乐、学AI机器人编程这些兴趣爱好课程。 这些对孩子的成长其实意义并不大,尤其是AI机器人编程。…...
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&#…...

软考 - 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个字节是主机号…...

Apifox软件的基础使用方式
Apifox软件的基础使用方式 简单方便的用途 该工具是接口在线调试工具,这里我给到连接供大家去官网下载,我个人觉得是比较于postman工具好用,提供的语言操作是中文版本的便于操作 下载和安装 https://apifox.com/?utm_sourcebaidu&ut…...
【Tensorflow】模型如何加载HDF文件数据集?
如果每个样本都被保存为一个单独的 HDF5 文件,可以使用 tf.data.Dataset.list_files 函数来创建一个文件名数据集,然后使用 tf.data.Dataset.interleave 函数来并行读取多个文件。 下面的示例展示了如何从多个 HDF5 文件中读取数据并创建一个 tf.data.D…...

校招又临近了,怎么在面试中应对设计模式相关问题呢?
夏天开始了,那么夏天结束时的毕业季也不远了。毕业是个伤感、期待而又略带残酷的时节,就像蜜桃无论成熟与否都会在这个时间被采摘,如果毫无准备就踏入社会,就会……马上变成低级社畜。所以说还是要早点为了毕业找工作做点准备&…...

padans关于数据处理的杂谈
情况:业务数据基本字段会有如下: Index([时间, 地区, 产品, 字段, 数值], dtypeobject)这样就会引发一个经典“三角不可能定理”,如何同时简约展现分时序、分产品、分字段数据。)一般来说, 1、时序为作为单独的分类&…...
神经网络的理解
文章目录 概念得分函数损失函数神经网络结构非线性激活函数神经网络运行过程神经网络能够做的事情概念 人工神经网络(Artificial Neural Networks,简写为ANNs)也简称为神经网络(NNs)或称作连接模型(Connection Model),它是一种模仿动物神经网络行为特征,进行分布式并…...

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

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

FreeRTOS 队列(二)
文章目录 一、向队列发送消息1. 函数原型(1)函数 xQueueOverwrite()(2)函数 xQueueGenericSend()(3)函数 xQueueSendFromISR()、xQueueSendToBackFromISR()、xQueueSendToFrontFromISR()(4&…...
用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…...
第五章 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系…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

软件工程 期末复习
瀑布模型:计划 螺旋模型:风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合:模块内部功能紧密 模块之间依赖程度小 高内聚:指的是一个模块内部的功能应该紧密相关。换句话说,一个模块应当只实现单一的功能…...

CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?
在现代前端开发中,Utility-First (功能优先) CSS 框架已经成为主流。其中,Tailwind CSS 无疑是市场的领导者和标杆。然而,一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...