位置: IT常识 - 正文

Vue|获取表单数据(vue获取value值)

编辑:rootadmin
Vue|获取表单数据

推荐整理分享Vue|获取表单数据(vue获取value值),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue获取数据axios,vue获取指定元素,vue读取excel表格数据,vue获取index,vue获取数据,vue怎么获取数据库数据,vue读取excel表格数据,vue获取table的行数,内容如对您有帮助,希望把文章链接给更多的朋友!

表单用于搜集不同类型的用户输入,Vue针对不同的表单输入类型,也提供了不同的的输入控制及验证。 精彩专栏持续更新↓↓↓ 微信小程序实战开发专栏

一、获取表单数据1.1 input1.2 radio1.3 checkbox1.4 select1.5 textarea1.6 表单提交1.7 表单修饰符number修饰符lazy修饰符trim修饰符一、获取表单数据

开始前的准备,在目录下创建文件夹及对应的页面如下

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>收集表单数据</title> <script src="../js/vue.js" type="text/javascript"></script></head><body> <!-- 准备好一个容器 --> <div id="root"> </div> <script type="text/javascript"> //Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 // 创建vue实例 const vm = new Vue({ el:'#root', //函数式 data:function(){ return{ info:{ name:'摔跤猫子', } }; } }); </script></body></html>1.1 input

默认类型的input框通过前面几章所介绍的v-model双向绑定即可

这里再插一个小技巧,当表单的内容为左侧标题及右侧文本框这样的布局组成时,如何实现点击标题光标自动在右侧的文本框选中呢?

只需要在左侧标题的label标签中添加一个for的同时指定一个名称,同时在需要选中光标的文本框设置相同的id值即可

<label for="number">学号:</label><input type="text" v-model="number" id="number" autocomplete="off" />1.2 radio

在使用radio标签时,需要给input指定其type为radio的同时添加一样的name值,否则无法达到多选一的效果

radio标签继续使用v-model双向绑定,但是切换时data中的sex字段并没有数据,这是因为radio类型下的input没有一个入口用于输入,必须给它指定默认的value值

相同的name值以及value值配置好后,即可实现效果

性别:男<input type="radio" v-model="sex" name="sex" value="男" />女<input type="radio" v-model="sex" name="sex" value="女" />1.3 checkbox

使用checkbox时是不是跟上述一样的步骤呢?毕竟用的都是input标签,只不过修改了其type值而已。

年级:一年级<input type="checkbox" value="一年级" v-model="grade" />二年级<input type="checkbox" value="二年级" v-model="grade" />三年级<input type="checkbox" value="三年级" v-model="grade" />

梦想是美好的,现实是残酷的,checkbox标签的表现让我们大失所望,不仅获取到的数据类型不对,而且不管是点击三个中的哪一个,他都是一起选中,一起取消,仿佛一个共同体

Vue|获取表单数据(vue获取value值)

这是因为在data中年级字段的定义使用的字符类型,这里需要改成数组类型的字段属性,效果就达成了

1.4 select

当使用select标签时,保持v-model标签即可

班级:<select v-model="className"> <option>请选择班级</option> <option>一班</option> <option>二班</option> <option>三班</option></select>

需要让其默认选中,在data中对其字段进行赋值即可

1.5 textarea

textarea文本域标签看着就没有那么多花里胡哨的把式,跟默认的input框一样即可正常获取数据

简介:<textarea v-model="desc"></textarea>1.6 表单提交

表单元素中的数据都能获取到后,如何将其在控制台进行打印输出呢?可以看到如下图,当在form表单中点击按钮时页面会刷新,这是因为提交后默认的动作就是跳转页面

如何避免页面刷新呢?这里需要给form标签绑定vue中的prevent事件并绑定对应的函数

<form @submit.prevent="test"></form>

通过在函数中打印this._data的方式进行输出

但是每次取值时都这样去获取_data,是不太优雅的行为,建议用一个对象将这些字段都装进去,在取值时直接取这个对象

这样也要付出相对应的代价,就是在页面上双向绑定的地方都得给它加上对应的前缀

1.7 表单修饰符

在Vue中,修饰符处理了许多DOM事件的细节

number修饰符

number修饰符,对类型进行转换,转为有效的数字,避免提交时的数据带上双引号导致错误

<label for="height">身高:</label> <input type="number" id="height" v-model.number="info.height" />lazy修饰符

添加lazy修饰符,在失去焦点的一瞬间再获取数据,不是实时获取。少量数据时效果不明显,如果是富文本且需要修改的内容是大量的那效果是很显著的

<textarea v-model.lazy="info.desc"></textarea>trim修饰符

trim顾名思义同时也很常见,去除首尾空格,字符中间的空格无法去除

<input type="text" v-model.trim="info.number" id="number" autocomplete="off" />
本文链接地址:https://www.jiuchutong.com/zhishi/298536.html 转载请保留说明!

上一篇:Vue组件中如何引入外部的js文件(vue 组件调用)

下一篇:three.js中坐标系转换以及camera的position、lookAt与up属性理解(three.js如何给模型锚点)

  • 建设银行怎么解除原来设备绑定(建设银行怎么解冻)

    建设银行怎么解除原来设备绑定(建设银行怎么解冻)

  • nova7如何设置返回键(nova7手机怎么设置返回键)

    nova7如何设置返回键(nova7手机怎么设置返回键)

  • 微信群的意义和作用(微信群的意义和价值怎么写)

    微信群的意义和作用(微信群的意义和价值怎么写)

  • 爱奇艺怎么面对面快传(爱奇艺怎么面对面登录会员)

    爱奇艺怎么面对面快传(爱奇艺怎么面对面登录会员)

  • vertu所有型号(vertu v5)

    vertu所有型号(vertu v5)

  • 华为有地震预警嘛(华为有地震预警功能哪里可以用)

    华为有地震预警嘛(华为有地震预警功能哪里可以用)

  • qq空间怎么发长视频(qq空间怎么发长图配音乐)

    qq空间怎么发长视频(qq空间怎么发长图配音乐)

  • 喜马拉雅为什么听着听着就断开了(喜马拉雅为什么播放不了)

    喜马拉雅为什么听着听着就断开了(喜马拉雅为什么播放不了)

  • 苹果x屏幕出现一条绿线可以修复吗(苹果换屏幕后屏幕乱跳)

    苹果x屏幕出现一条绿线可以修复吗(苹果换屏幕后屏幕乱跳)

  • 苹果xsmax是什么处理器(苹果xsmax是什么时候出的)

    苹果xsmax是什么处理器(苹果xsmax是什么时候出的)

  • 淘宝怎么看删除的订单(淘宝怎么看删除的订单记录)

    淘宝怎么看删除的订单(淘宝怎么看删除的订单记录)

  • 苹果手机屏幕变成黑白色怎么调回来(苹果手机屏幕变黑怎么恢复正常)

    苹果手机屏幕变成黑白色怎么调回来(苹果手机屏幕变黑怎么恢复正常)

  • 苹果6快捷键小圆点怎么设置(苹果6快捷键小组件在哪)

    苹果6快捷键小圆点怎么设置(苹果6快捷键小组件在哪)

  • 怎么删除退款详情里的内容(怎样删除退款记录)

    怎么删除退款详情里的内容(怎样删除退款记录)

  • 苹果x怎么改微信提示音(苹果x怎么改微信密码)

    苹果x怎么改微信提示音(苹果x怎么改微信密码)

  • 手机wps绘制表格(手机wps绘制表格怎么操作)

    手机wps绘制表格(手机wps绘制表格怎么操作)

  • 拼多多拼团什么规则(拼多多拼团什么时候可以退款)

    拼多多拼团什么规则(拼多多拼团什么时候可以退款)

  • 快手直播在哪里打开(快手直播在哪里看收到的礼物)

    快手直播在哪里打开(快手直播在哪里看收到的礼物)

  • 小米6x耳机插上还是外放(小米6x插口耳机失灵)

    小米6x耳机插上还是外放(小米6x插口耳机失灵)

  • 苹果7人脸识别设置在哪(苹果7人脸识别解锁设置)

    苹果7人脸识别设置在哪(苹果7人脸识别解锁设置)

  • 如何在数据透视表中对数据进行计算(如何在数据透视表中增加一行)

    如何在数据透视表中对数据进行计算(如何在数据透视表中增加一行)

  • TypeError: Cannot read properties of undefined (reading ‘NAME‘)报错解决

    TypeError: Cannot read properties of undefined (reading ‘NAME‘)报错解决

  • hdaudpropshortcut.exe是什么进程 作用是什么 hdaudpropshortcut进程查询

    hdaudpropshortcut.exe是什么进程 作用是什么 hdaudpropshortcut进程查询

  • 瓦莱塔,马耳他 (© Deejpilot/GettyImages)(马耳他共和国瓦莱塔福利)

    瓦莱塔,马耳他 (© Deejpilot/GettyImages)(马耳他共和国瓦莱塔福利)

  • 机票代理是否差额征税
  • 免税收入进项税额转出比例结转法
  • 应交税费账目处理
  • 冲回存货跌价准备所得税是调增还是调减
  • 借条时间到了怎么续
  • 税务登记财务负责人可以是法人吗
  • 已报关的货物可以改单价价吗
  • 定额发票验旧后怎么报税
  • 应收账款核销的会计处理
  • 其他货币资金贷方是增加还是减少
  • 去年已支付的费用怎么查
  • 分包挂靠认定依据
  • 房地产开发企业预收款预缴增值税
  • 一般纳税人怎么交税
  • 固定资产维修费率
  • 记账凭证需要哪些人员签章
  • 机器人销售属于什么行业
  • 利用退休人员避孕措施
  • 同一控制下企业合并权益抵消
  • 取得高新技术企业
  • 城建税上月少计提本月怎么做账
  • 冲销上月暂估入账的原材料会计分录
  • php函数返回值类型
  • ajax调用php函数
  • php创建表单
  • 没按时报税罚款多少
  • 高新技术企业如何节税
  • sisusbrg.exe - sisusbrg是什么进程 有什么用
  • php数组函数题目
  • 企业雇佣临时工的工资属于工资薪金支出么
  • mac怎么写代码
  • centos从命令行进入图形
  • 退款会退货吗
  • 公户发工资必须是员工账号必须是公户开户行吗
  • 企业持有待售的固定资产,应当对其预计
  • vue开发环境配置
  • 注意力机制 q k v
  • 科大讯飞语音识别主要产品
  • php如何入门
  • 房屋租赁费属于什么税收分类编码
  • 微擎框架破解版v2.7.7
  • 支付银行手续费等直接收费金融服务
  • 购进商品发生溢余的核算
  • 固定资产折旧怎么做会计科目
  • python迭代器有什么用
  • phpcms 标签
  • 资产负债表的货币资金怎么算
  • 购进交通运输设备怎么做账
  • 可以公账户给私人转账吗
  • 地补缴费额是什么
  • 商业汇票怎么算到期日
  • 备用金存回银行
  • count(10,2,5)
  • windows隐藏
  • 索尼笔记本电脑怎么进入bios设置
  • ubuntu server snap
  • mac文档怎么传给winds
  • xp系统无法预览图片
  • Radio.exe - Radio是什么进程 有什么用
  • win10 2020h1
  • win7系统回收站不见了怎么办
  • win8系统屏幕亮度调节
  • win8应用商店废了
  • win8电脑设置在哪
  • win8关闭uac
  • linux安装linux
  • cocos2dx运行原理
  • fastcgi iis
  • pm2启动nodejs
  • javascript语法总结
  • 轻松实现的英文
  • bootstrap layer弹框
  • javascript面向对象精要pdf
  • 瀑布流水风景图片
  • jquery解决跨域问题
  • 广西12366医保缴费
  • 机动车检测属于哪个税收
  • 发票是去国税还是地税
  • 1月纳税申报截止时间
  • 韩国税务怎么算收入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设