vue的表单收集案例

Vue的表单收集案例

这只是最基础的表单收集,并未涉及到element-ui。

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>收集表单数据</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><!-- 这里可以设置action属性就是指定表单提交的地址 --><form @submit.prevent="demo"> 账号:<input type="text" v-model.trim="userInfo.account"> <br/><br/>密码:<input type="password" v-model="userInfo.password"> <br/><br/><!-- 注意输入age需要使用.number转化为数字 -->年龄:<input type="number" v-model.number="userInfo.age"> <br/><br/>性别:<!-- 单选框 需要使用name属性表示他们是一组,不然没有单选效果--><input type="radio" name="sex" v-model="userInfo.sex" value="male"><input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/><!-- 多选框 ,因为可以有多个值,所以hobby是一个数组 -->爱好:学习<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="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br/><br/>其他信息:<!--这里使用了懒加载,只有在失去焦点的一瞬间才会进行收集 --><textarea v-model.lazy="userInfo.other"></textarea> <br/><br/><!-- 这里虽然也是多选框,但是它的值只有勾选,未勾选,truefalse,所以就不需要value属性 --><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a><!-- 表单按钮默认会进行提交操作,进行页面跳转,不需要的话可以阻止事件的默认行为 --><button>提交</button></form></div></body><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'female',hobby:[],city:'beijing',other:'',agree:''}},methods: {demo(){//把收集到的表单数据转为json格式console.log(JSON.stringify(this.userInfo))}}})</script>
</html>

收集表单数据:

  • 若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
  • 若:<input type="radio"/>,单选框则v-model收集的是value值,且要给标签配置value值。
  • 若:<input type="checkbox"/> 多选框
    1.没有配置input的value属性,那么收集的就是true(勾选 or 未勾选,是布尔值)
    2.配置input的value属性:
    (1)v-model的初始值是非数组,那么收集的就是true(勾选 or 未勾选,是布尔值)
    (2)v-model的初始值是数组,那么收集的的就是value值组成的数组。

总结:就是不能用户输入的除了v-module都会多加一个value属性 ,但是也有只需要true和false的checkbox就除外。

备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤–>

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

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

相关文章

LabVIEW的六轴工业机器人运动控制系统

LabVIEW开发六轴工业机器人运动控制系统 本项目开发了一个高效的工业机器人控制系统&#xff0c;重点关注于运动学算法和轨迹规划算法的实现和测试。LabVIEW作为一个关键技术&#xff0c;在项目中扮演了核心角色。 系统研究与算法开发&#xff1a;首先&#xff0c;项目围绕机…

大IP时代文旅品牌如何用数字人玩转数字营销?

在大IP时代&#xff0c;有IP意味着话题、人气、流量以及变现能力&#xff0c;文旅品牌如何打造一个成功的、受欢迎的IP&#xff0c;拓宽文旅资源价值&#xff0c;成为文旅品牌营销的一大痛点。随着元宇宙概念兴起&#xff0c;数字人IP可以满足文旅品牌多元化需求&#xff0c;文…

React学习计划-React16--React基础(二)组件与组件的3大核心属性state、props、ref和事件处理

1. 组件 函数式组件&#xff08;适用于【简单组件】的定义&#xff09; 示例&#xff1a; 执行了ReactDOM.render(<MyComponent/>, ...)之后执行了什么&#xff1f; React解析组件标签&#xff0c;找到了MyComponent组件发现组件是使用函数定义的&#xff0c;随后调用该…

ARM 点灯

.text .global _start _start: led1设置GPIOE时钟使能 RCC_MP_AHB4ENSETR[4]->1 0X50000A28LDR R0,0X50000A28 指定寄存器地址LDR R1,[R0] 将寄存器数值取出来放在R1中ORR R1,R1,#(0x1<<4) 将第4位设置为1STR R1,[R0] 将修改后的值写回去设置PE10为输出 GPIOE…

Python 爬虫之下载视频(三)

批量下载某B主视频 文章目录 批量下载某B主视频前言一、基本思路二、确定遍历循环结构三、基本思路中第12步三、基本思路中第345步总结 前言 上一篇讲了如何去获取标题和视频链接。这篇就跟大家讲一下如何去下载这些视频。本篇会以标题和 视频链接 为突破口&#xff0c;来寻找…

GrayLog日志平台的基本使用-docker容器日志接入

1、/etc/docker/daemon.json中加入如下配置并重启服务 [rootlocalhost src]# cat /etc/docker/daemon.json { "registry-mirrors": ["https://dhq9bx4f.mirror.aliyuncs.com"], "log-driver": "gelf", "log-opts":…

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器 背景 ExoPlayer与Media3的能力结合&#xff0c;为Android应用程序播放多媒体内容提供了强大的解决方案。在本教程中&#xff0c;我们将介绍如何设置带有Media3的ExoPlayer来支持使用M3U8 URL进行直播流。此外&#x…

PortSwigger Business Logic Vulnerabilities

lab1: Excessive trust in client-side controls 给了100块 买价值1337的货 在历史包里发现 尝试直接修改价格 lab2: High-level logic vulnerability 这里把加入购物车时价格可控的点修复了 但是数量可控 我们可以买负数的东西来加钱 但是返回Cart total price cannot be …

【数据结构】四、串

目录 一、定义 二、表示与实现 定长顺序存储 堆分配存储 链式存储 三、BF算法 四、KMP算法 1.求next数组 方法一 方法二&#xff08;考试方法&#xff09; 2.KMP算法实现 方法一 方法二 3.nextval 4.时间复杂度 本节最重要的就是KMP算法&#xff0c;其他要求不高…

汽车级EEPROM 存储器 M24C64-DRMN3TP/K是电可擦除可编程只读存储器?它的功能特性有哪些?

M24C64-DRMN3TP/K是一款64 Kbit串行EEPROM汽车级设备&#xff0c;工作温度高达125C。符合汽车标准AEC-Q100 1级规定的极高可靠性。 该设备可通过一个高达1MHz的简单串行I2C兼容接口访问。 存储器阵列基于先进的真EEPROM技术&#xff08;电可擦除可编程存储器&#xff09;。M2…

【力扣】543. 二叉树的直径

543. 二叉树的直径 突然间发现现在刷的题好多都和大一时学的数据结构密切相关&#xff0c;比如说这道题就用到的深度优先搜索算法。 题解&#xff1a; 以根节点为例&#xff0c;我们通过遍历左边的深度就可以得到当前左子树的长度&#xff0c;然后再遍历其右边&#xff0c;就…

吴恩达RLHF课程笔记

1.创建偏好数据集 一个prompt输入到LLM后可以有多个回答&#xff0c;对每个回答选择偏好 比如{prompt,answer1,answer2,prefer1} 2.根据这个数据集&#xff08;偏好数据集&#xff09;&#xff0c;创建reward model&#xff0c;这个model也是一个LLM,并且它是回归模型&#…

momentum2靶机

文章妙语 遇事不决&#xff0c;可问春风&#xff1b; 春风不语&#xff0c;遵循己心。 文章目录 文章妙语前言一、信息收集1.IP地址扫描2.端口扫描3.目录扫描 二&#xff0c;漏洞发现分析代码bp爆破1.生成字典2.生成恶意shell.php2.抓包 三&#xff0c;漏洞利用1.反弹shell 四…

Diffusion扩散模型学习:图片高斯加噪

高斯分布即正态分布&#xff1b;图片高斯加噪即把图片矩阵每个值和一个高斯分布的矩阵上的对应值相加 1、高斯分布 np.random.normal 一维&#xff1a; import numpy as np import matplotlib.pyplot as pltdef generate_gaussian_noise(mean, std_dev, size):noise np.ran…

低代码如何助力企业数字化转型?

目录 一、低代码开发是什么&#xff1f; 二、低代码与企业数字化转型 1&#xff09;集成化 2&#xff09;智能化 3&#xff09;定制化 三、低代码开发平台对于企业数字化转型的优势 01、提供源码 02、私有化部署 03、敏捷开发 04、拓展能力 四、低代码带来的效益 以…

量化服务器 - 后台挂载运行

服务器 - 后台运行 pip3命令被kill 在正常的pip命令后面加上 -no-cache-dir tmux 使用教程 https://codeleading.com/article/40954761108/ 如果你希望在 tmux 中后台执行一个 Python 脚本&#xff0c;你可以按照以下步骤操作&#xff1a; 启动 tmux: tmux这将会创建一个新…

绝对干货-讲讲设计模式之结构型设计模式

经典的23种设计模式种属于结构型设计模式的是装饰模式&#xff0c;适配器模式&#xff0c;代理模式&#xff0c;组合模式&#xff0c;桥接模式&#xff0c;外观模式&#xff0c;享元模式。 如果说创建型设计模式解决的是创建对象的问题&#xff0c;那么结构型模式就是通过类和…

JS逆向基础

JS逆向基础 一、什么是JS逆向&#xff1f;二、接口抓包三、逆向分析 一、什么是JS逆向&#xff1f; 我们在网站进行账号登录的时候对网页源进行抓包就会发现我们输入的密码在后台会显示为一串由字母或数字等符号&#xff0c;这就是经过加密呈现的一段加密文字&#xff0c;而分…

python脚本 链接到ssh服务器 快速登录ssh服务器 ssh登录

此文分享一个python脚本,用于管理和快速链接到ssh服务器。 效果演示 🔥完整演示效果 👇第一步,显然,我们需要选择功能 👇第二步,确认 or 选择ssh服务器,根据配置文件中提供的ssh信息,有以下情况 👇场景一,只有一个候选ssh服务器,则脚本会提示用户是否确认链…

blender径向渐变材质-着色编辑器

要点&#xff1a; 1、用纹理坐标中的物体输出连接映射中的矢量输入 2、物体选择一个空坐标&#xff0c;将空坐标延z轴上移一段距离 3、空坐标的大小要缩放到和要添加材质的物体大小保持一致