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;等技术开发。旨在为微服务架构提供一种简…

GO基础进阶篇 (十三)、泛型

泛型 先看一下这段代码。 package mainimport "fmt"func main() {strs : []string{"a", "b"}printArray(strs) }func printArray(arr []interface{}) {for _, a : range arr {fmt.Println(a)} }上面的代码中&#xff0c;我们想要打印参数arr的…

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等

AI绘画认识

什么是AI绘画 AI绘画是指利用人工智能技术进行绘画创作的过程&#xff0c;它使用机器学习算法和深度神经网络等技术&#xff0c;通过对现有艺术品、图像等大量数据进行分析和学习&#xff0c;生成新的艺术品或图像。 AI绘画的应用场景非常广泛&#xff0c;包括数字艺术、游戏…

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

Python:list列表与tuple元组的区别

在Python中&#xff0c;List&#xff08;列表&#xff09; 和Tuple&#xff08;元组&#xff09; 都是用于存储一组有序元素的数据结构&#xff0c;但它们有一些关键的区别&#xff0c;包括可变性、性能、语法等方面。 1. List&#xff08;列表&#xff09; 用法&#xff1a;…

Git 提交前缀规范

Git 提交前缀规范 feat : 新功能。添加一个新的用户界面元素、一个新的功能或一个新的 API fix : 修复 bug。修复一个导致应用程序崩溃的错误、一个导致数据丢失的错误或一个导致用户体验不佳的错误 docs : 文档更新。更新你的应用程序的用户指南、更新你的 API 文档或更新你…

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

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

算法 - 二分法 / 双指针 / 三指针 / 滑动窗口

文章目录 &#x1f37a; 二分法&#x1f37b; 旋转数组&#x1f942; 33. 搜索旋转排序数组 [旋转数组] [目标值] (二分法) &#x1f37b; 元素边界&#x1f942; 34. 在排序数组中查找元素的第一个和最后一个位置 [有序数组] > [元素边界] > (二分法)&#x1f942; 81. …

IOS元素定位对应关系

resource-id也称为id&#xff0c;resource-id是唯一的 # 元素定位 agree_continue_id "com.baidu.searchbox:id/positive_button" WebDriverWait(driver, 10, 1).until(EC.visibility_of_element_located((MobileBy.ID, agree_continue_id))) driver.find_element…

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;如果有不明白的先读一下上一…