位置: 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如何给模型锚点)

  • 苹果13天气怎么定位到本地(苹果13天气怎么设置)

    苹果13天气怎么定位到本地(苹果13天气怎么设置)

  • telecom是什么

    telecom是什么

  • 单片机复位后pc值为多少(单片机复位后PC指针的内容是)

    单片机复位后pc值为多少(单片机复位后PC指针的内容是)

  • 华为手机照相机图标不见了怎么办(华为手机照相机闪光灯怎么关闭)

    华为手机照相机图标不见了怎么办(华为手机照相机闪光灯怎么关闭)

  • 华为相机怎么设置时间地点位置(华为相机怎么设置九宫格拍照)

    华为相机怎么设置时间地点位置(华为相机怎么设置九宫格拍照)

  • 功率1800w一小时耗电多少(额定功率1800w一小时用多少电)

    功率1800w一小时耗电多少(额定功率1800w一小时用多少电)

  • 取消oppo手机遮挡黑屏(取消oppo手机遮挡黑屏a96)

    取消oppo手机遮挡黑屏(取消oppo手机遮挡黑屏a96)

  • ios12.4.7更新了什么(ios12.42更新了什么)

    ios12.4.7更新了什么(ios12.42更新了什么)

  • 个人公众号每天只能发一篇吗(个人公众号每天可以发布多少文章)

    个人公众号每天只能发一篇吗(个人公众号每天可以发布多少文章)

  • qq运动步数有延迟吗(qq运动步数有延迟怎么办)

    qq运动步数有延迟吗(qq运动步数有延迟怎么办)

  • 已发货的快递怎样拒收(已发货的快递怎么退款)

    已发货的快递怎样拒收(已发货的快递怎么退款)

  • ms cm是什么单位(ms是啥单位名称)

    ms cm是什么单位(ms是啥单位名称)

  • 小米8夜光屏用来干嘛(小米手机夜光屏有什么用)

    小米8夜光屏用来干嘛(小米手机夜光屏有什么用)

  • 键盘光怎么开(键盘开灯光怎么弄)

    键盘光怎么开(键盘开灯光怎么弄)

  • 兼容模式什么意思(兼容模式是什么)

    兼容模式什么意思(兼容模式是什么)

  • 闲鱼卖家为什么被处罚(闲鱼卖家为什么不发货)

    闲鱼卖家为什么被处罚(闲鱼卖家为什么不发货)

  • vc2010怎么创建c程序(VC2010怎么创建项目)

    vc2010怎么创建c程序(VC2010怎么创建项目)

  • 小米6通话声音小怎么办(小米6通话声音小怎么调)

    小米6通话声音小怎么办(小米6通话声音小怎么调)

  • 华为平板m5如何分屏(华为平板M5如何升级鸿蒙系统)

    华为平板m5如何分屏(华为平板M5如何升级鸿蒙系统)

  • 华为复制粘贴板在哪里(华为手机如何打开复制粘贴板)

    华为复制粘贴板在哪里(华为手机如何打开复制粘贴板)

  • 苹果手机为什么会出现激活锁(苹果手机为什么没信号无服务)

    苹果手机为什么会出现激活锁(苹果手机为什么没信号无服务)

  • realmex后盖是什么材质(realme后盖怎么打开)

    realmex后盖是什么材质(realme后盖怎么打开)

  • designedbyvivo是哪款(designedvivo是什么型号手机)

    designedbyvivo是哪款(designedvivo是什么型号手机)

  • 华为激活锁忘记了id和密码(华为激活锁忘记密码)

    华为激活锁忘记了id和密码(华为激活锁忘记密码)

  • 抖音进小黑屋多久解封(抖音小黑屋多久解除)

    抖音进小黑屋多久解封(抖音小黑屋多久解除)

  • 有限的访问权限怎么解决 无线(有限的访问权限是什么意思)

    有限的访问权限怎么解决 无线(有限的访问权限是什么意思)

  • 怎么在BIOS中开启VT虚拟化技术以提高安卓模拟器的性能(怎么在bios中开启硬件虚拟化)

    怎么在BIOS中开启VT虚拟化技术以提高安卓模拟器的性能(怎么在bios中开启硬件虚拟化)

  • 自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)

    自定义修改el-talbe show-overflow-tooltip的样式(自定义修改器)

  • while循环语法(while循环语法结构)

    while循环语法(while循环语法结构)

  • 代扣代缴个人所得税如何做账
  • 收据收到写什么
  • 库存商品结转成本摘要怎么写
  • 环保企业会计分录
  • 如何知道一家公司是否可靠
  • 小微企业城建税优惠政策2022
  • 使用权资产是什么类科目
  • 采购是进项还是销项
  • 装修费是否计入固定资产
  • 销售退回的货物应当由什么部门清点
  • 固定资产交换的账务处理
  • 福建水利建设专业排名
  • 2018年房地产行业分析
  • 准备金税前扣除什么意思
  • 广告公司营改增后的会计分录
  • 应交税费有余额怎么结转
  • 2019一般纳税人和小规模纳税人的区别
  • 税种登记要带什么资料?
  • 营业范围是销售范围吗
  • 企业之间资金拆借利息是否可以税前扣除
  • linux小技巧
  • 银行存款的利息收入计入什么科目
  • 什么是增值税差额征税政策的小规模纳税人
  • uniapp多端兼容
  • PHP:pcntl_signal()的用法_PCNTL函数
  • 代理业如何交增值税
  • 公司资金被税务部门冻结
  • 企业购入固定资产要交印花税吗
  • axios入门
  • 资产类备抵科目借方是加还是减
  • 钢管租赁费如何计算
  • html5简单吗
  • javascript bom dom
  • node.js deno
  • 人人都能用英语pdf下载
  • php类的特性实例是什么
  • 建筑行业工程结算属于什么科目
  • 高新技术企业福利费扣除比例
  • 可供出售金融资产是流动资产吗
  • 小微企业具体指
  • 织梦遍历栏目描述
  • 个人股东借款给公司涉及个税么
  • 高新技术企业研发人员比例要求
  • 固定资产的货币资金包括
  • 计提工资 个人所得税
  • 税法对工资薪金的要求
  • 一般纳税人简易征收的适用范围
  • 自然人独资交企业所得税吗
  • 房地产公司收到客户违约金会计科目
  • 当期免抵税额和免抵退税额的区别
  • 结转损益主营业务收入在借方
  • 哪些项目可以计提汇兑损益
  • 领用生产用原材料一批
  • 0税率出口退税
  • 企业哪些部门
  • 购入的无形资产加计扣除怎么算
  • 物业管理费发票税率
  • 餐饮服务的监管由哪个部门负责
  • 发票税率如何填写
  • xp不能安装win8
  • debian10配置ipv6地址
  • win8关机键怎么添加到开始菜单
  • 不需要远程传输的文件
  • 关于月亮的诗句
  • 粒子冲突
  • 上传图片 js
  • android的游戏
  • 塔防类的网游
  • itertools.permutations
  • 运用javascript制作网页
  • mongorestore报错
  • python 很简单
  • node js搭建服务器
  • unity3d从入门到精通
  • jQuery Ajax 异步加载显示等待效果代码分享
  • js拖动效果
  • 如何用python编写脚本处理数据
  • 广州出租车发票号码在哪里
  • 租车费为何不能抵扣
  • 可以抵扣的消费税计入什么科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设