Vue-收集表单信息
收集表单信息
Input
- label for 和 input id 关联, 点击账号标签 也能聚焦 input
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- label for 和 input id 关联, 点击账号标签 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",},methods: {},});</script>
</html>运行效果
- 初始化
- 填写
账号、密码
Radio
- name=‘xxx’ 归为一组 实现互斥选择
- 指定自定义value值 否则默认为 true/false
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',},methods: {},});</script>
</html>运行效果
- 初始化
- 选择性别
Checkbox (多个)
- 指定自定义value值 否则默认为 true/false
- 支持多选，需将绑定的变量设置为数组
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><!--<label >所属地区：</label><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br><input type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br><br><button @click="submit">注册</button> --></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:'',read:""},methods: {submit(){}},});</script>
</html>运行效果
- 初始化
- 选择爱好
Select
- 单选，必须指定自定义value值
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值 --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",},methods: {},});</script>
</html>运行效果
- 初始化
- 选择地区
Textarea
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值 --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br></div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:''},methods: {},});</script>
</html>运行效果
- 初始化
- 输入信息
Checkbox（单个）
- 就是要值是true/false, 因此无需自定义value
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>表单数据</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>.base {padding: 5px;height: 100px;}</style></head><body><div id="root"><h1>表单数据</h1><div><!-- for 和 id 关联 点击 账号 也能聚焦 input--><label for="account">账号：</label><input id="account" type="text" v-model="account"><br><br><label for="password">密码：</label><input id="password" type="password" v-model="password"><br><br><label >性别：</label><!-- 1. name='sex' 归为一组 实现互斥选择 2. 指定自定义value值 否则默认为 true/false--><input name="sex" type="radio" value="男" v-model="sex">男<input name="sex" type="radio" value="女" v-model="sex">女<br><br><label >爱好：</label><!-- 1. 指定自定义value值 否则默认为 true/false2. 支持多选，需将绑定的变量设置为数组 hobby=[]--><input type="checkbox" value="爬山" v-model="hobby">爬山<input type="checkbox" value="健身" v-model="hobby">健身<input type="checkbox" value="唱歌" v-model="hobby">唱歌<br><br><label >所属地区：</label><!-- 单选 指定自定义value值 --><select v-model="city"><option value="">请选择地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shenzhen">深圳</option></select><br><br><label >描述信息：</label><textarea v-model="description"></textarea><br><br><input type="checkbox" v-model="read">阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br><br><button @click="submit">提交</button> </div></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",account:"",password:"",sex:'',hobby:[],city:"",description:'',read:""},methods: {submit(){console.log("----------------提交表单了----------------")console.log("账号：" + this.account)console.log("密码：" + this.password)console.log("性别：" + this.sex)console.log("爱好：" + this.hobby)console.log("地区：" + this.city)console.log("描述：" + this.description)console.log("已读协议：" + this.read)}},});</script>
</html>运行效果
- 初始化
- 选中已读
- 填写表单信息并提交
特殊说明
- v-model.number ： 保证收集到的数据为数字
- v-model.lazy ： 失去焦点再去收集数据
- v-model.trim ：收集到的数据去除了前后空格
相关文章：
Vue-收集表单信息
收集表单信息 Input label for 和 input id 关联, 点击账号标签 也能聚焦 input 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>表单数据</title><!-- 引入Vue --><scrip…...
私服 nexus 之间迁移 npm 仓库
本文介绍如何将一个 Nexus 特定仓库中的 npm 包内容迁移到另一个 Nexus 特定仓库。此过程适用于需要重构仓库结构或合并仓库的场景。 迁移脚本 以下是完整的迁移脚本，它会自动完成以下操作： 从源仓库获取所有 npm 包列表下载每个包的 .tgz 文件解压并…...
微服务及容器化设计--可扩展的架构设计
引言 在当今快速发展的技术环境中，企业需要构建能够适应变化、支持快速迭代且可靠的软件系统。传统的单体应用架构在面对高并发、大规模部署和复杂业务逻辑时往往力不从心。微服务架构结合容器化技术应运而生，成为现代可扩展系统设计的主流选择。本文将…...
vscode开发stm32，main.c文件中出现很多报错影响开发解决日志
本质上为 .vscode/c_cpp_properties.json文件和Makefile文件中冲突，两者没有同步。 将makefile文件中的内容同步过来即可，下面给出一个json文件的模板，每个人的情况不同，针对性修改即可 {"configurations": [{"na…...
嵌入式鸿蒙系统中水平和垂直以及图片调用方法
利用openharmony操作的具体现象： 第一：Column 作用：沿垂直方向布局的容器。 第二：常用接口 Column(value?: {space?: string | number}) 参数： 参数名参数类型必填参数描述spacestring | number否纵向布局元素垂直方向间距。 从API version 9开始，space为负数或者ju…...
【海康USB相机被HALCON助手连接过后，MVS显示无法连接故障。】
在Halcon里使用助手调用海康USB相机时，如果这个界面点击了【是】 那么恭喜你，相机只能被HALCON调用使用，使用MVS或者海康开发库，将查找不到相机 解决方式： 右键桌面【此电脑】图标 ->选择【管理】 ->选择【设备…...
面试大厂Java：从Spring Boot到微服务架构
面试大厂Java：从Spring Boot到微服务架构 在一个阳光明媚的下午，谢飞机来到了某知名互联网大厂的面试现场，迎接他的是一位严肃的面试官。 第一轮提问： 面试官： 谢飞机，请你简单介绍一下Spring Boot的核心…...
2025年电气工程与轨道交通国际会议：绿色能源与智能交通的创新之路
2025年电气工程与轨道交通国际会议（ICEERT 2025）是一场电气工程与轨道交通领域的国际盛会，将于2025年在武汉隆重召开。此次会议汇聚了全球顶尖的专家学者和行业精英，共同探讨电气工程与轨道交通的最新研究成果和技术趋势。会议将围…...
macOS 安装 Grafana + Prometheus + Node Exporter
macOS 安装指南：Grafana Prometheus Node Exporter 目录简介🚀 快速开始 安装 Homebrew1. 安装 Homebrew2. 更新 Homebrew 安装 Node Exporter使用 Homebrew 安装验证 Node Exporter 安装 Prometheus使用 Homebrew 安装验证安装 安装 Grafana使用 Home…...
WPF log4net用法
WPF log4net用法 一、在工程中管理NuGet程序包，找到log4net，点击安装，如下图已成功安装； 二、在工程中右键添加新建项，选择应用程序配置文件（后缀为.config）,然后设置名称，这里设置…...
数字孪生数据监控如何提升汽车零部件工厂产品质量
一、汽车零部件工厂的质量挑战 汽车零部件作为汽车制造的基础，其质量直接关系到整车的性能、可靠性和安全性。在传统的汽车零部件生产过程中，质量问题往往难以在早期阶段被发现和解决，导致生产效率低下、生产成本上升，甚至影响到…...
web自动化-Selenium、Playwright、Robot Framework等自动化框架使用场景优劣对比
Web 自动化测试框架根据不同的技术栈和应用场景可分为多种类型，以下是常见的框架及其特点、适用场景： 一、主流框架分类 1. Selenium 生态（Python/Java/C#/JavaScript） 核心组件： WebDriver：操作浏览器的…...
使用 Akamai 分布式云与 CDN 保障视频供稿传输安全
作者简介：David Eisenbacher 是 EZDRM 公司的首席执行官兼联合创始人，该公司是首家提供 "DRM 即服务" 的企业。作为 CEO，David 始终秉持为企业确立的使命：为视频服务商提供简洁有效的数字版权管理方案，助力其…...
vue发版html 生成打包到docker镜像进行发版
将Vue项目打包成Docker镜像部署主要分为以下几个步骤： 1. Vue项目打包 执行npm run build生成dist文件夹，包含静态资源文件 注意检查index.html中资源引用路径是否正确（避免绝对路径问题） 2. 编写Dockerfile Copy Code FROM…...
python uv包管理器使用
官方文档：uv官方文档 注：uv安装不依赖python。 使用： python版本管理 # 查看已安装的python列表 uv python list # 安装特定版本 uv python install 3.12 # 指定项目使用的python版本 uv python pin <version># 使用指定版本运行脚本…...
贪心算法实战3
文章目录 前言区间问题跳跃游戏跳跃游戏II用最少数量的箭引爆气球无重叠区间划分字母区间合并区间 最大子序和加油站监控二叉树 前言 今天继续带大家进行贪心算法的实战篇3，本章注意来解答一些运用贪心算法的比较难的问题，大家好好体会，怎么…...
linux、docker、git相关操作
1 linux 1.1解压缩 1.1.1 zip zip xxx.zip file 把file压缩成xxx.zip -r 递归压缩： zip -r example_new.zip 示例集 # 新建压缩包并命名为 example_new.zip zip -r xxx.zip file1 file2 dir1 将多个文件目录压成zip包 unzip file.zip -d target_dir #把file.zip解…...
实测，大模型谁更懂数据可视化？
大家好，我是 Ai 学习的老章 看论文时，经常看到漂亮的图表，很多不知道是用什么工具绘制的，或者很想复刻类似图表。 实测，大模型 LaTeX 公式识别，出乎预料 前文，我用 Kimi、Qwen-3-235B-A22B、…...
小程序32-简易双向数据绑定
在WXML中，普通属性的绑定是单向的，例如:<input value"{{value}}" /> 如果希望用户输入数据的同时改变data中的数据，可以借助简易双向绑定机制。在对应属性之前添加model:前缀即可: 例如<input model:value"{{value}…...
jenkins报错java.lang.OutOfMemoryError: Java heap space
报错信息 2025-05-27 09:17:16.2340000 [id38] WARNING j.u.ErrorLoggingScheduledThreadPoolExecutor#afterExecute: failure in task not wrapped in SafeTimerTask java.lang.OutOfMemoryError: Java heap spaceat java.base/java.lang.StringUTF16.compress(StringUTF16.j…...
leetcode669.修剪二叉搜索树：递归法利用有序性精准剪枝
一、题目深度解析与BST特性应用 题目描述 给定一棵二叉搜索树（BST）和一个值区间[low, high]，修剪BST使得所有节点的值都落在该区间内。修剪后的树必须保持BST的性质，且不能改变原有节点的相对位置关系。 BST的核心特性应用 二…...
Spring Boot 中 @RequestParam 和 @RequestPart 的区别详解（含实际项目案例）
Spring Boot 中 RequestParam 和 RequestPart 的区别详解（含实际项目案例） 在日常的 Spring Boot 开发中，我们经常会遇到表单提交、文件上传、JSON 参数绑定等需求。而在处理这类请求时，两个常见的注解——RequestParam 和 Reque…...
Linux入门(十一)进程管理
Linux 中每个执行的程序都称为一个进程，每个进程都分配一个ID号（PID） 每个进程都可能以两种方式存在，前台（屏幕上可以操作的）和后台（屏幕上无法看到的），一般系统的服务都…...
【课堂笔记】EM算法
文章目录 背景极大似然估计隐变量高斯混合模型EM算法合理性分析相关好文章背景 EM算法（期望最大化算法，Expectation-Maximization Algorithm）是一种迭代优化算法，用于在含有隐变量的概率模型中估计最大似然参数。 这是概括性的定义，下面我会解释其中的名词并用具体例子…...
)
怎样将win11+ubuntu双系统的ubuntu从机械硬盘迁移至固态硬盘(1)
将 Ubuntu 从机械硬盘迁移到固态硬盘是一个涉及多个步骤的过程。以下是一个基本的迁移指南： 1. 前期准备 1.1 备份数据： 确保你已备份数据，以防止在迁移过程中出现意外导致任何数据丢失。 1.2 固态硬盘安装： 确保固态硬盘正确…...
el-table设置自定义css
隔行变色、表头颜色 // 设置table字体颜色、背景色 .el-table {color: #ffffff;background-color: transparent !important; }设置隔行变色功能 .el-table__body {tr.el-table__row {&:nth-child(even) {td.el-table__cell {background-color: #08417f;}}&:nth-child(…...
Compose中导航跳转的实现NavHost
文章目录 1、添加依赖2、两个页面导航跳转的实现2.1 定义导航图2.2 创建导航控制器2.3 实现两个页面跳转 2、带参数的导航2.1 定义带参数的路径2.2 定义接收参数2.3 导航到带参数的屏幕 3、关键点 1、添加依赖 // build.gradle dependencies {implementation "androidx.n…...
VSCode/Cursor中Red Hat Dependency Analytics扩展的自动依赖注入files:分析
VSCode/Cursor中Red Hat Dependency Analytics扩展的自动依赖注入files:分析 问题描述 最近在使用VSCode开发时，发现一个令人困扰的问题：每次打开或保存package.json文件时，都会自动添加一个自引用的依赖项。具体表现为： {&quo…...
【技能篇】RabbitMQ消息中间件面试专题
1. RabbitMQ 中的 broker 是指什么？cluster 又是指什么？ 2. 什么是元数据？元数据分为哪些类型？包括哪些内容？与 cluster 相关的元数据有哪些？元数据是如何保存的？元数据在 cluster 中是如何分布…...
Linux研学-环境搭建
一 概述 1 Linux 概述 Linux系统由内核、Shell、文件系统、应用程序及系统库等关键部分组成。内核作为核心，管理硬件资源与系统服务；Shell提供用户与系统交互的命令行界面，让用户能便捷执行操作；文件系统负责数据的存储、组织与管…...