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

  • 苹果11nfc感应在哪唤醒(iphone11 nfc感应)

    苹果11nfc感应在哪唤醒(iphone11 nfc感应)

  • 两个华为手机怎么互相充电(两个华为手机怎么控制对方手机)

    两个华为手机怎么互相充电(两个华为手机怎么控制对方手机)

  • 苹果11省电模式怎么关闭(苹果11省电模式和正常模式有什么区别)

    苹果11省电模式怎么关闭(苹果11省电模式和正常模式有什么区别)

  • 朋友圈防折叠(朋友圈防折叠小程序)

    朋友圈防折叠(朋友圈防折叠小程序)

  • 屏蔽水晶头和非屏蔽差别大吗(屏蔽水晶头和非屏蔽水晶头护套一样吗)

    屏蔽水晶头和非屏蔽差别大吗(屏蔽水晶头和非屏蔽水晶头护套一样吗)

  • 删除好友再加回来对方知道吗(删除好友再加回来看不到朋友圈)

    删除好友再加回来对方知道吗(删除好友再加回来看不到朋友圈)

  • 注销微信后手机号可以重新注册账号吗(注销微信后手机号多久可以重新注册账号吗?)

    注销微信后手机号可以重新注册账号吗(注销微信后手机号多久可以重新注册账号吗?)

  • 域名未绑定是不是网址封了(域名未绑定是不是跑路了)

    域名未绑定是不是网址封了(域名未绑定是不是跑路了)

  • 天翼网关2.0 2.4g是千兆吗(天翼网关2.0 2.4g是多少兆)

    天翼网关2.0 2.4g是千兆吗(天翼网关2.0 2.4g是多少兆)

  • 快手直播封禁多久可以解封(快手好多主播直播封禁)

    快手直播封禁多久可以解封(快手好多主播直播封禁)

  • oled烧屏能修复吗(oled烧屏)

    oled烧屏能修复吗(oled烧屏)

  • 苹果pro是什么意思(苹果pro什么意思?)

    苹果pro是什么意思(苹果pro什么意思?)

  • 华为mate30是双系统吗(华为mate30双系统怎么关闭)

    华为mate30是双系统吗(华为mate30双系统怎么关闭)

  • 照片合成用什么软件(照片合成用什么相机)

    照片合成用什么软件(照片合成用什么相机)

  • 微信二维码怎么申请(微信二维码怎么恢复原来的样子)

    微信二维码怎么申请(微信二维码怎么恢复原来的样子)

  • 手机怎么买大巴票(手机怎么买大巴车票)

    手机怎么买大巴票(手机怎么买大巴车票)

  • 华为gt2运动款和时尚款区别(华为GT2运动款和雅致)

    华为gt2运动款和时尚款区别(华为GT2运动款和雅致)

  • 18瓦快充是什么意思(18瓦快充好还是20瓦快充好)

    18瓦快充是什么意思(18瓦快充好还是20瓦快充好)

  • qq安全邮箱是多少(qq安全邮箱格式怎么写的)

    qq安全邮箱是多少(qq安全邮箱格式怎么写的)

  • 手机微信老是白屏怎么回事(手机微信老是白屏怎么办)

    手机微信老是白屏怎么回事(手机微信老是白屏怎么办)

  • 电脑ctrl键的功能(电脑ctrl键的功能怎么读)

    电脑ctrl键的功能(电脑ctrl键的功能怎么读)

  • 怎么取消绿钻业务(如何退订绿钻业务)

    怎么取消绿钻业务(如何退订绿钻业务)

  • 多角度分析开源ERP系统:odoo、ERP5、ERPnext(多角度分析数据)

    多角度分析开源ERP系统:odoo、ERP5、ERPnext(多角度分析数据)

  • 反射填充详解ReflectionPad2d(padding)(反射dll)

    反射填充详解ReflectionPad2d(padding)(反射dll)

  • 长期待摊费用一般指什么
  • 出口退税退的是进项税还是销项税
  • 负数发票可以作废不
  • 资产负债表中的流动资产包括什么
  • 非盈利组织是两套账吗?
  • 当月没有发生购销合同还要报印花税吗
  • 正版手写
  • 实收资本变更做账依据
  • 代开工资收服务费怎么做凭证?
  • 营改增后房地产企业如何开票
  • 购买财务软件账务处理规定
  • 支付业务招待费的税费是进项还是销项
  • 防伪税控技术维护费是进项还是销项
  • 开票资料上的电话可以是手机吗?
  • 增值税小规模纳税人的税率
  • 国有土地租金怎么交税
  • 企业取得代理销售发票
  • macos12支持设备
  • 临时文件夹在哪个位置
  • 怎么取消电脑开机自动启动软件
  • php 设计模式 鸟哥
  • 龙骨花的养殖方法移植
  • php 首字母大写
  • 年底所得税账务处理
  • 卖出回购证券的钱怎么算
  • 减值测试的资产有哪些
  • 企业支付给员工的一次性伤残就业补助金计入哪项费用
  • 库存现金被盗会怎么样
  • 无形资产相关税费
  • 废旧物资回收经营单位
  • 基于opencv的图像处理
  • 可供出售金融资产在资产负债表日反映的是
  • 全站怎么使用
  • thinkphp import
  • 应收应付核销规则及常见问题
  • Linux Howtos: C/C++ > Sockets Tutorial
  • 报关单在哪里打出来
  • 专项资金怎么填表
  • 合同资产要结转增值税吗
  • js方案
  • python深入浅出
  • 个人所得税申报操作流程
  • 库存商品的科目设置
  • 股权转让分期付款风险
  • 原材料账户该如何做账
  • 营销策划合作协议
  • mysql命令行实用程序
  • 水电费发票没有可以用其他发票抵吗
  • 销售边角料的增值税率
  • 委托生产的会计分录
  • 提供劳务结转的成本计入什么科目
  • 哪里还有备用金可以借
  • 什么是成品油发票
  • 基本账户可以转私人账户吗
  • 公司销售部门购买产品
  • 多计提的税款会计处理
  • sql server如何重启
  • win10 mysql 5.6.35 winx64免安装版配置教程
  • macbook存东西一般存在哪
  • linux支持多种平台
  • 比较简单的字
  • 如何快速恢复么
  • os x10.11el capitan beta4更新了什么?os x10.11el capitan beta4下载地址
  • linux操作系统版本有哪些
  • 怎么设置电脑开机启动项
  • win7系统安装虚拟机
  • win10系统下如何打开internet(ISS)信息服务
  • redhat无法启动
  • 2015年win10共发布135个安全补丁 创历年之最
  • style js
  • dos判断变量是否为空
  • unity的脚本
  • linux 中的atq命令
  • node cd
  • unity地形图片
  • jquery设置边框
  • 如何解决android兼容问题
  • 个体户刻公章需要备案吗
  • 税务筹划企业所得税案例分析题
  • 国税税票在哪里打印
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设