Vue表单基本操作-收集表单数据

这篇具有很好参考价值的文章主要介绍了Vue表单基本操作-收集表单数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

收集表单数据

使用vue中的v-model收集表单里面的数据,不同的表单元素配合v-model会有不同的写法和技巧
本次的表单元素包括:文本框,单选,多选,下拉框,文本域

编写表单元素

首先编写表单元素,包括:文本框,单选,多选,下拉框,文本域

input输入框细节

这里有一个细节(小技巧):表单编写input输入框的时候,通常会配合label标签使用并加上相关的css或或者js,这样会让界面更加美观,用户体验更好,但是今天主要讲的是v-model获取不同的元素数据,就不在代码里面增加复杂的代码了,大家知道就好,我在下面简单演示下加不加的区别

不加上lable

Vue表单基本操作-收集表单数据

页面的交互性很差,必须自己点击输入框才能获取到光标

Vue表单基本操作-收集表单数据

加上lable

Vue表单基本操作-收集表单数据

查看页面,点击账号会跳进对应的输入框并获取光标

Vue表单基本操作-收集表单数据

继续编写表单元素

Vue表单基本操作-收集表单数据

查看页面

Vue表单基本操作-收集表单数据

表单元素到此就写完了,接下来就要把表单交给vue管理并收集数据了

text输入框和password输入框

这两个比较简单,定义两个变量绑定在输入框里面

Vue表单基本操作-收集表单数据

Vue表单基本操作-收集表单数据

radio单选按钮

接下来就是性别,也就是radio单选按钮,多个单选按钮,但是只能选中一个单选按钮

错误示例

如果直接简单粗暴的定义变量使用v-model绑定单选框,是不行的

Vue表单基本操作-收集表单数据

页面上获取不到选中的值,为什么会这样的?因为v-model默认收集的是输入框的value,但是目前单选框是没有value的,所以获取不到

Vue表单基本操作-收集表单数据

正确示例

给单选按钮赋值value属性即可,注意:value不要重复

Vue表单基本操作-收集表单数据

Vue表单基本操作-收集表单数据
如果想要某一个单元按钮默认选中,可以在属性赋默认值

Vue表单基本操作-收集表单数据

男默认选中

Vue表单基本操作-收集表单数据

checkbox多选框

错误示例

和单选框一样,不能直接定义属性使用v-model

Vue表单基本操作-收集表单数据

可以看到收集到的是一个布尔值

Vue表单基本操作-收集表单数据

这个错误和单元框一致,也是没value造成的,至于为什么是布尔值,vue获取的是这一组复选框里面的checked,所以只要选中了就是true,不然就是false

那么给复选框赋上value再试试

Vue表单基本操作-收集表单数据

发现还是不行

Vue表单基本操作-收集表单数据

哎,为什么给复选框配置了value属性还是不行呢?

因为复选框的初始值能够影响到收集到的数据,如果把复选框的属性错误的写成了字符串,那么就算配置了value值也不行

正确示例

注意:如果需要获取复选框的值,可以使用这种写法,如果只需要判断是否被选中,也就是true或false,可以参考下面的另外一种使用方式

多组复选框属性应该写成一个数组

Vue表单基本操作-收集表单数据

这样就好了

Vue表单基本操作-收集表单数据

select下拉框

select下拉框就比较正常了,和正常的输入框是一样的

Vue表单基本操作-收集表单数据

Vue表单基本操作-收集表单数据

如果想要上来就默认选中,也是和单选框一样的

Vue表单基本操作-收集表单数据

Vue表单基本操作-收集表单数据

textarea多行输入框

textarea多行输入框本质来说也是输入框,写法和正常文本框是一样的

Vue表单基本操作-收集表单数据

Vue表单基本操作-收集表单数据文章来源地址https://www.toymoban.com/news/detail-422825.html

到了这里,关于Vue表单基本操作-收集表单数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.set()方法+收集表单数据+过滤器

    目录 收集表单数据 过滤器 给对象追加一个属性: Vue.set(对象,‘追加属性名’ ,\\\'追加属性值\\\') this.$set(对象,‘追加属性名’ ,\\\'追加属性值\\\') 注⚠️:对象不能是vue实例,或者vue实例的根数据对象    例子: 总结: 若:input type=\\\'text\\\' /,则v-model收集的是value值,用户输入的就

    2024年02月05日
    浏览(32)
  • vue基本操作[1] 续更----让世界感知你的存在

    1.vue-cli webpack全局引入jquery (1)首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。) (2)在webpack.base.conf.js里加入 \\\"\\\"\\\" \\\"\\\"\\\" (3)在module.exports的最后加入 \\\"\\\"\\\" \\\"\\\"\\\" (4) 在main.js 引入就ok了 \\\"\\\"\\\" \\\"\\\"\\\" (5)然后 npm run dev 就可以在页面中直接用

    2024年02月17日
    浏览(27)
  • vue基本操作[2] 续更----让世界感知你的存在

    什么是template/标签 template是html5新元素,主要用于保存客户端中的内容,表现为浏览器解析该内容但不渲染出来,可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。 关于单文件组件 vue的单文件相当于一个页面中的组件,包含了关于该组件的html-css-js文件

    2024年02月17日
    浏览(27)
  • vue基本操作[上] 续更----让世界感知你的存在

    1.vue-cli webpack全局引入jquery (1)首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。) (2)在webpack.base.conf.js里加入 \\\"\\\"\\\" \\\"\\\"\\\" (3)在module.exports的最后加入 \\\"\\\"\\\" \\\"\\\"\\\" (4) 在main.js 引入就ok了 \\\"\\\"\\\" \\\"\\\"\\\" (5)然后 npm run dev 就可以在页面中直接用

    2024年02月16日
    浏览(28)
  • [MySQL]基本数据类型及表的基本操作

    哈喽,大家好!我是保护小周ღ,本期为大家带来的是 MySQL 数据库常用的数据类型,数据表的基本操作:创建、删除、修改表,针对修改表的结构进行了讲解,随后是如何向数据表中添加数据,浅浅的提了一下表中数据的查询,更多相关知识敬请期待:保护小周ღ *★,°*:.☆

    2024年02月02日
    浏览(36)
  • MYSQL数据库基本操作-DQL-基本查询

    一.概念 数据库管理系统一个重要功能就是数据查询。数据查询不应是简单返回数据库中存储的数据,还应该根据需要对数据进行筛选以及确定数据以什么样的格式显示。 MySQL提供了功能强大,灵活的语句来实现这些操作。 MySQL数据库使用select语句来查询数据。 二:语法  

    2024年01月25日
    浏览(54)
  • Vue2-收集表单数据、过滤器、内置指令与自定义指令、Vue生命周期

    🥔:我徒越万重山 千帆过 万木自逢春 更多Vue知识请点击——Vue.js 1、不同标签的value属性 若: input type=\\\"text\\\"/ 普通输入框,则v-model收集的是value值,用户输入的就是value值。 若: input type=\\\"radio\\\"/ 单选框,则v-model收集的是value值,且要给标签配置value值。 若: input type=\\\"checkb

    2024年02月13日
    浏览(35)
  • 数据库实验一:基本表操作、基本数据查询和复杂数据查询

    按下图创建四个表:teacher、student、course和SC,为属性选择合适的域、合适的主码和外键约束,并为他们插入所列出数据; 中文语义 teacher (TID,TNAME,DEPT,SALARY) 教师(教工号,姓名,系,薪水) student (SID,SNAME,DEPT,AGE,GENDER) 学生(学号,姓名,系,年龄,性别) course (CID,CNAME,DE

    2024年02月01日
    浏览(44)
  • MySQL数据库基本操作

    功能 sql 查看所有数据库 show databases; 创建数据库 create  database [if not exists] mydb1 [charset=utf8] 切换数据库 use mydb1; 删除数据库 drop database [if exists] mydb1 ; 修改数据库编码 alter database mydb1 character set utf8; 数值类型 字符串类型 日期类型 功能 sql 查看当前数据库所有名称 show tabl

    2024年02月02日
    浏览(53)
  • SQL 数据库基本操作

    打开 SSMS(Microsoft SQL Server Management Studio),“对象资源管理器” 窗口列表中依次双击 “UERE-20220228OY” → ”数据库“ → ”系统数据库“ (”UERE-20220228OY“ 是系统连接的服务器名称,不同的计算机中名称不尽相同),在展开的列表中可看到 4个已经存在的数据库,分别为

    2024年02月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包