Vue-23、Vue收集表单数据

1、效果

在这里插入图片描述
2、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>收集表单数据</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>.text{width: 217px;height: 180px;}</style>
</head>
<body>
<div id="root"><form  @submit.prevent="demo">账号:<input type="text" id="demo" v-model="userINfo.account"><br/><br/>密码:<input type="password" v-model="userINfo.password"><br/><br/>年龄:<input type="number" v-model.number="userINfo.age">性别:男<input type="radio" name="sex"  v-model="userINfo.sex" value="male"><input type="radio" name="sex" v-model="userINfo.sex" value="female"><br/><br/>爱好:学习<input type="checkbox" v-model="userINfo.hobby" value="study">打游戏<input type="checkbox" v-model="userINfo.hobby" value="game">吃饭<input type="checkbox" v-model="userINfo.hobby"  value="eat"><br/><br/>所属校区<select v-model="userINfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="sahnghai">上海</option><option value="shenzheng">深圳</option><option value="wuhan">武汉</option></select><br/><br/>其他信息:<textarea :class="userINfo.text" v-model="userINfo.other"></textarea> <br/><br/><input type="checkbox" v-model="userINfo.agree"> 阅读并接受<a href="https://cn.bing.com">用户协议</a><button>提交</button></form >
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{userINfo:{text:'text',account:'',password:'',age:'',sex:'male',hobby:[],city:'beijin',other:'',agree:false,}},methods:{demo(){//整理json格式提交console.log(JSON.stringify(this.userINfo));}}})
</script>
</body>
</html>

注意:type=“number” v-model.number 通常同时使用。保证输入框输入的为数字。

在这里插入图片描述
在这里插入图片描述
总结:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务网关 Gateway

服务网关 Gateway Spring Cloud Gateway 是 Spring Cloud 生态系统中的网关&#xff0c;它基于 Spring5.0 SpringBoot2.0 WebFlux&#xff08;基于高性能的 Reactor 模式响应式通信框架 Netty&#xff0c;异步非阻塞模型&#xff09;等技术开发。旨在为微服务架构提供一种简…

Ubuntu系统使用快速入门实践(八)——出现的各种问题

Ubuntu系统使用快速入门实践系列文章 下面是Ubuntu系统使用系列文章的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 Ubuntu系统使用快速入门实践系列文章总链接 下面是专栏地址&#xff1a; Ubuntu系统使用快速入门实践系列文章专栏 文章目录 Ubuntu系统使用快速…

Eclipse搭建python环境

一、下载eclipse eclipse官网下载参考链接 二、 下载PyDev ​PyDev 三、安装和配置pyDev 下载完PyDev&#xff0c;解压之后是下面两个文件夹&#xff0c;我下载的版本是PyDev 7.7 ,然后拷到eclipse对应的目录下就可以 四、然后新建一个python程序 1.新建一个项目 ​​…

【C语言】数据结构——排序三(归并与计数排序)

&#x1f497;个人主页&#x1f497; ⭐个人专栏——数据结构学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读&#xff1a;1. 归并排序1.1 基本思想1.2 递归实现1.3 非递归实现 2. 计数排序2.1 基本思想2.2 代码实现 导读&#x…

VSCODE上使用IDEA上的快捷键:IntelliJ IDEA Keybindings

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法 &#x1f492; 公众号&#xff1a;知识浅谈 &#x1f525;网站…

git项目管理

Git工作流程图 git 基础指令 git init #创建本地仓库,创建成功后&#xff0c;当前目录会多一个.git文件夹 git status #查看修改状态 git add . #添加工作区到暂存区 git commit -m 注释内容 #提交暂存区到本地仓库&#xff08;commit&#xff09; git log …

k8s集群环境搭建以及插件安装

前置条件 终端工具MobaXterm很好用。 1、虚拟机三台&#xff08;ip按自己的网络环境相应配置&#xff09;(master/node) 节点ipk8s-master192.168.200.150k8s-node1192.168.200.151k8s-node2192.168.200.152 2、关闭防火墙(master/node) systemctl stop firewalld systemc…

导游翻译的职责是什么?如何做好导游翻译?

作为旅游行业的关键人物&#xff0c;导游翻译是连接游客与目的地文化的桥梁。他们不仅要具备出色的语言能力&#xff0c;还要深入了解目的地的历史、文化和风俗习惯&#xff0c;为游客提供专业、贴心的导游翻译服务。那么&#xff0c;导游翻译的主要职责是什么&#xff1f;如何…

idea中设置控制台显示service窗口项

一 操作配置 1.1 具体操作 1.操作 2.操作 3.选择应用类型&#xff1a; appplication&#xff0c;springbootapplication等

使用 GitHub 远程仓库

使用 GitHub 远程仓库 GitHub 是最大的 Git 版本库托管商&#xff0c;是成千上万的开发者和项目能够合作进行的中心。 大部分 Git 版本库都托管在 GitHub&#xff0c;很多开源项目使用 GitHub 实现 Git 托管、问题追踪、代码审查以及其它事情。本篇文章主要带大家上手 GitHub …

模型Model:文件系统模型QFileSystemModel

一、 1、常用函数 QFileSystemModel自带目录变化监听 1)、 QModelIndex setRootPath(const QString &path); 设置检索根目录 2)、 bool isDir(const QModelIndex &index) const; 选中索引是否为目录节点 3)、 QString filePath(const QModelIndex &index) const;…

【分布式技术】分布式存储ceph之RBD块存储部署

目录 创建 Ceph 块存储系统 RBD 接口 服务端操作 1、创建一个名为 rbd-demo 的专门用于 RBD 的存储池 2、将存储池转换为 RBD 模式 3、初始化存储池 4、创建镜像 5、在管理节点创建并授权一个用户可访问指定的 RBD 存储池 6、修改RBD镜像特性&#xff0c;CentOS7默认情…

Databend 开源周报第 128 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 使用 Databend …

[Linux 进程(四)] 再谈环境变量,程序地址空间初识

文章目录 1、前言2、环境变量2.1 main函数第三个参数 -- 环境参数表2.2 本地环境变量和env中的环境变量2.3 配置文件与环境变量的全局性2.4 内建命令与常规命令2.5 环境变量相关的命令 3、程序地址空间 1、前言 上一篇我们讲了环境变量&#xff0c;如果有不明白的先读一下上一…

C++ 编程需要什么样的开发环境?

C 编程需要什么样的开发环境&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#…

网页设计-用户体验

Use Cases (用例) 用例是用户如何在网站上执行任务的书面描述&#xff0c;从用户的角度描述了系统响应请求时的行为。每个用例都是用户实现目标的一系列简单的步骤。简言之&#xff0c;用例是一种用于描述系统如何满足用户需求的方法。 用例的好处 1. 明确需求&#xff1a; Use…

Python办公自动化 – 可以解析的文件格式和可以调用的API实现办公自动化

Python办公自动化 – 可以解析的文件格式和可以调用的API实现办公自动化 以下是往期的文章目录&#xff0c;需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处…

Unity与Android交互通信系列(4)

上篇文章我们实现了模块化调用&#xff0c;运用了模块化设计思想和简化了调用流程&#xff0c;本篇文章讲述UnityPlayerActivity类的继承和使用。 在一些深度交互场合&#xff0c;比如Activity切换、程序启动预处理等&#xff0c;这时可能会需要继承Application和UnityPlayerAc…

Windows系统字体尺寸学习

调用GetTextMetrics来获得字体尺寸信息, 函数返回设备描述表中当前选定的字体信息&#xff1b; 返回值到TEXTMETRIC类型的结构中&#xff1b; 返回字段值的单位取决于当前设备描述表映射方式&#xff1b;默认映射方式是MM_TEXT&#xff0c;值的单位是像素&#xff1b; 前7个字…

多模型图像特征可视化

特征图可视化是指将网络中某一层的特征图可视化出来&#xff0c;以便观察网络在不同层次上学到的特征。卷积可视化可以帮助深度学习研究者更好地理解卷积的概念和原理&#xff0c;从而更好地设计和优化卷积神经网络。通过可视化&#xff0c;研究者可以更清晰地看到卷积运算中的…