Vue收集表单数据学习笔记

news2024/11/15 1:48:27

收集表单数据

v-model双向数据绑定,收集的是input框的value,单选按钮不存在value,就像代码中的男女选项,即使绑定性别v-model=“sex”,控制台依然不能接收性别的值,因为没有value值,,想要接收数据需要在单选input框输入value来标记男女,后台会输出value。
在这里插入图片描述

多组的勾选框应该把初始数据写成数组,再添加v-model双向绑定hobby,给每个勾选的数据添加value值,最后收集的就是value组成的数组。

因为hobby初始值会影响v-model收集数据,如果不在实例里面你设置hobby为数组,那么无法获取数据指挥显示true和false。

<div id="form">
        <form @submit.prevent="demo">
            账号: <input type="text" v-model.trim="userInfo.account"><br /><br />
            密码:<input type="password" v-model="userInfo.password"><br /><br />
            性别:男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /><br /><br />
            年龄:<input type="number" v-model.number="userInfo.age"><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="drive"><br /><br /><br />
            所属校区:<select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">广州</option>
                <option value="">杭州</option>
            </select>
            <br /><br /><br />
            其他信息:
            <textarea v-model.lazy="userInfo.other"></textarea><br />
            <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="www.baidu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>

所属校区v-model:,通过指定data里面city值来设置默认值。
接受协议里面只是勾选不需要value设置v-model就可以。

提交表单默认跳转事件(.prevent阻止默认行为),表单提交设置form的submit的demo事件,data里面写demo

可以通过console.log(this._data)来输出页面中的数据,但是一般不在代码中直接操作_data,所以将data所有数据包裹在userInfo里面,页面中所有v-model都要添加userInfo来访问

<script>
        const vm = new Vue({
            el: '#form',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    sex: 'female',
                    age: '',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                demo() {
                    // console.log(this._data)
                    // alert(1)
                    console.log(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>

在这里插入图片描述

总结

收集数据表单:
若:,则v-model收集的是value值,用户输入的就是value值。
若:,则v-model收集的是value值,且要给标签配置value值。
若:
1. 没有配置input的value值,那么收集的就是checked(勾选是true,未勾选为false)
2. 配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选是true,未勾选为false)
(2)v-model的初始值是数组,那么收集的就是value组成的数组

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

 lazy:失去焦点再收集数据
        number:输入字符串转为有效的数字
        trim:输入首尾空格过滤

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

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

相关文章

python 第二章——数据类型详解

文章目录 前言一、什么是数据类型1.变量2.注释 二、数字三、字符串四、布尔五、列表六、元组七、集合八、字典总结 前言 本系列教程目录&#xff0c;可点击这里查看&#xff1a;Python教程目录 学习一门编程语言&#xff0c;第一件事就应该是熟练掌握这门编程语言的基本数据类…

[Java]JavaWeb开发中的MVC设计模式

一、有关Java Web与MVC设计模式 学习过基本Java Web开发的人都已经了解了如何编写基本的Servlet&#xff0c;如何编写jsp及如何更新浏览器中显示的内容。但是我们之前自己编写的应用一般存在无条理性&#xff0c;对于一个小型的网站这样的编写没有任何问题&#xff0c;但是一但…

MCDF代码详解,mcdf_rgm_pkg.sv代码超详细注释

寄存器模块代码详解 好戏开始: `include "param_def.v" package mcdf_rgm_pkg; import uvm_pkg::*; `include "uvm_macros.svh" import reg_pkg::*; //具有uvm_reg类型的专用寄存器描述[write-red-reg] class ctrl_reg extends uvm_r…

机器人教学中游戏化课程案例尝试

本文内容严格按创作模板发布&#xff1a; 2023年LPL春季赛季后赛正在火热进行中&#xff0c;你们心中的总冠军是哪支队伍呢&#xff1f;作为热爱游戏的程序猿&#xff0c;一起来聊聊你那些有意义的游戏开发经历吧&#xff01; 游戏化ROS机器人课程的优势有以下七点&#xff1a…

第3章-运行时数据区

此章把运行时数据区里比较少的地方讲一下。虚拟机栈&#xff0c;堆&#xff0c;方法区这些地方后续再讲。 转载https://gitee.com/youthlql/JavaYouth/tree/main/docs/JVM。 运行时数据区概述及线程 前言 本节主要讲的是运行时数据区&#xff0c;也就是下图这部分&#xff0c…

5.微服务项目实战---Gateway--服务网关,实现统一认证、鉴权、监控、路由转发等

5.1 网关简介 大家都都知道在微服务架构中&#xff0c;一个系统会被拆分为很多个微服务。那么作为客户端要如何去调用 这么多的微服务呢&#xff1f;如果没有网关的存在&#xff0c;我们只能在客户端记录每个微服务的地址&#xff0c;然后分别去调用。 这样的架构&#xff0…

用友联合7家信创生态伙伴成立“信创领先实践联盟”,助力企业数智化国产替代

数字经济背景下&#xff0c;面对国际局势不稳定等以切不确定因素&#xff0c;只有突破和掌握关键核心技术&#xff0c;打造生态话语权&#xff0c;掌握产业发展主动权&#xff0c;向产业价值链高端迈进&#xff0c;我国才能摆脱受制于人局面。而推动信创产业繁荣发展&#xff0…

SAP-选择实施离散制造模式还是重复制造模式?

Implement Discrete Manufacturing or Repetitive Manufacturing? 翻译一篇&#xff0c;反正我也写不出来~~~~ “狗还是猫&#xff1f;” 这可能是世界上第二难的问题。 想知道最难的是什么&#xff1f; 这里是&#xff1a; “实施离散制造还是重复制造&#xff1f;” 作…

【设计模式】我终于读懂了访问者模式。。。

&#x1f330;测评系统的需求 将观众分为男人和女人&#xff0c;对歌手进行测评&#xff0c;当看完某个歌手表演后&#xff0c;得到他们对该歌手不同的评价(评价 有不同的种类&#xff0c;比如 成功、失败 等)传统方案 &#x1f331;传统方式的问题分析 如果系统比较小&…

2023年面试题入门篇和进阶篇万余字题目总结【答案+解析】

2023年Java面试题入门篇和进阶篇总结【答案解析】 入门篇1.、下列代码输出结果是()2.x为float类型&#xff0c;y为double类型&#xff0c;a为int类型&#xff0c;b为long类型&#xff0c;c为char类型&#xff0c;问xy*a/xb/ac的值是什么类型3.下列哪种说法是正确的4.mysql表use…

rollup打包封装的js类库

rollup中文网&#xff1a;简介 | rollup.js 中文文档 | rollup.js中文网Rollup 是一个 JavaScript 模块打包器&#xff0c;可以将小块代码编译成大块复杂的代码&#xff0c;Rollup 对代码模块使用新的标准化格式&#xff0c;这些标准都包含在 JavaScript 的 ES6 版本中。https:…

postman解决报错填坑指南

postman报错问题处理总结 问题1&#xff1a;如何解决postman请求异常丢掉proxy开头header自动使用系统环境变量代理问题描述&#xff1a;postman请求&#xff0c;配置了proxy开头的header&#xff0c;但是发请求的时候没有携带&#xff0c;可以查看postman的View-Show Postman …

D. Frets On Fire(二分 + 前缀和)

Problem - D - Codeforces Miyako带着一个乌克丽丽来到跳蚤王国。她与当地的跳蚤居民成为好朋友&#xff0c;并每天为他们演奏美妙的音乐。 作为国报&#xff0c;跳蚤们为她制作了一个更大的乌克丽E:它有n根这&#xff0c;每核这上都有(10181)个品位&#xff08;ires)&#xff…

危险区域闯入识别系统 yolov8

危险区域闯入识别系统通过YOLOv8网络模型技术&#xff0c;危险区域闯入识别系统对现场画面中发现有人违规闯入禁区&#xff0c;系统立即抓拍告警同步回传后台。YOLOv8 提供了一个全新的 SOTA 模型&#xff0c;包括 P5 640 和 P6 1280 分辨率的目标检测网络和基于 YOLACT 的实例…

打电话用的耳机哪个牌子的好?打电话专用的蓝牙耳机推荐

耳机是可以帮助我们进行工作的娱乐设备&#xff0c;像日常中使用最多的就是通话和听歌啦&#xff0c;近几年不论是从产品推出速度&#xff0c;还是做工及品质上来说都有了质的飞跃&#xff0c;下面分享几款打电话音质好的蓝牙耳机。 一、南卡小音舱Lite2蓝牙耳机 蓝牙版本&am…

Inpaint Anything (AI替换)

1、介绍 Inpaint Anything 是一个结合了 SAM、图像修补模型&#xff08;例如 LaMa&#xff09;和 AIGC 模型&#xff08;例如 Stable Diffusion&#xff09;等视觉基础模型的AI图像替换&#xff0c;修补系统。 基于此系统&#xff0c;用户可以方便的使用IA进行图像替换&#…

electron+vue3全家桶+vite项目搭建【14】electron多窗口,多语言切换不同步更新问题

文章目录 引入问题演示补充逻辑注意封装缓存工具类补充状态管理调整多语言初始化调整多语言切换组件 解决方案思路整理渲染进程监听语言切换主进程创建多语言切换处理语言切换组件通知主进程语言切换 最终实现效果演示 引入 我们之前在这篇文章中集成了 多语言切换&#xff0c…

各种加法器介绍——真值表、表达式、电路图、verilog代码实现

文章目录 前言一、半加器二、全加器三、串行/行波进位加法器&#xff08;Ripple-Carry Adder/RCA&#xff09;四、超前进位加法器&#xff08;Lookahead Carry Adder/LCA&#xff09;五、进位保存加法器&#xff08;Carry Save Adder/CSA&#xff09; 前言 2023.4.25 一、半加…

Stable Diffusion人工智能图像合成

AI 图像生成大有来头。新发布的开源图像合成模型称为Stable Diffusion&#xff0c;它允许任何拥有 PC 和像样的 GPU 的人想象出他们能想象到的几乎任何视觉现实。它几乎可以模仿任何视觉风格&#xff0c;如果你给它输入一个描述性的短语&#xff0c;结果就会像魔术一样出现在你…

HTML5 <span> 标签

实例 HTML5 <span>标签内的内容独立于文档&#xff0c;当对该标签应用样式时&#xff0c;包含在其中的内容会呈现出不同的视觉效果。请参考下述示例&#xff1a; 使用 <span> 元素对文本中的一部分进行着色&#xff1a; <p>我的母亲有 <span style&quo…