vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」

vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」一、@input(或者是v-on:input)使用:<inputtype="text"placeholder="通过乘车人/订单号查询"v-model="inputVal"v-on:input="search"value=""/>适用于实时查询,每输入一个字符都会触发该事件。如图:二、@keyup.enter该事件与v-on:input事件的区别在于:i

大家好,又见面了,我是你们的朋友全栈君。

一、@input(或者是v-on:input)

使用:

<input type="text" placeholder="通过乘车人/订单号查询" v-model="inputVal"  v-on:input="search" value="" />

适用于实时查询,每输入一个字符都会触发该事件。如图:
在这里插入图片描述

二、@keyup.enter

该事件与v-on:input事件的区别在于:input事件是实时监控的,每次输入都会调用,而@keyup.enter事件则是在pc上需要点击回车键触发,而在手机上则是需要点击输入键盘上的确定键才可触发。

三、@change

该事件和enter事件相似,在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

注:在ios手机上会出现问题:
如果要的效果是输入值不用虚拟键盘触发方法就调查询接口进行查询,这时在安卓手机上没有问题,但是在ios手机上会出现多次触发的情况。
简单的解决办法:
对input的值进行监听(watch),把原本需要绑在input框的事件在监听变化时调用。

四、@blur(失焦)

要满足输入框在输入完成、移到其他地方时进行验证时,需要用到该事件,用此事件进行绑定验证方法即可。
注:如果使用mintui中的mt-field标签时,对应的blur(失焦)事件要执行时,要用@blur.native.capture=””来代替@blur。

<mt-field label="用户名" placeholder="请输入用户名" type="text" v-model="username" @blur.native.capture="testUser"></mt-field>

注:在elementUI中输入框el-input内,直接使用@click事件无效,此时,需要加上修饰符.native,即:@click.native。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/131638.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • bool函数

    bool函数bool函数:(非原创)BOOL是布尔型变量,也就是逻辑型变量的定义符,类似于float、double等,只不过float定义浮点型,double定义双精度浮点型。在objective-c中提供了相似的类型BOOL,它具有YES值和NO值。布尔型变量的值只有真(true)和假(false),可用于逻辑表达式,也就是“或”“与”“非”之类的逻辑运算和大于小于之类的关系运算,逻辑表达式运算结果为真…

    2022年6月14日
  • 海量数据库解决方案 pdf(海量数据处理)

    作者序言这已经是第四次为本书写作者序言了,此时此刻过去20年的生活如同电影般在我的脑海里一一掠过。当我最初决定步入IT领域时就为自己立下了誓言,时至今日回想起多年走过的历程,其间充满了艰辛,也正是这无数的艰辛让我最终体验了收获的愉悦。回望这20多年的足迹,我一直努力用新的视角去观察他人所忽视的领域,尝试用崭新的思维和充满创意的双手去耕耘。尽管如此,也仍然无法紧跟IT技术飞快的发展步伐。我为实现理想而终日不停前行的脚步,虽然忙碌但却无限满足。众所周知,能够加工成宝石的原石比比皆是,一分耕耘,一分收

    2022年4月18日
  • JDBC解析7_Blob

    JDBC解析7_Blob

    2021年8月8日
  • 展示组件(Presentational component)和容器组件(Container component)之间有何不同

    展示组件(Presentational component)和容器组件(Container component)之间有何不同展示组件(Presentational component)和容器组件(Container component)之间有何不同

    2022年4月22日
  • 开机就提示“请安装TCP/IP协议,error=10106”的解决的方法

    开机就提示“请安装TCP/IP协议,error=10106”的解决的方法

    2021年11月14日
  • oracle如何格式化日期,Oracle 日期格式化处理汇总[通俗易懂]

    oracle如何格式化日期,Oracle 日期格式化处理汇总[通俗易懂]一、日期及时间格式化应用TO_CHAR(日期,格式化参数)1、返回任意有效分割符拼接的年月日字符串1.1、Selectto_char(sysdate,’yyyy/mm/dd’)Fromdual;*************************2015/04/29(即返回以’/’分隔符连接的字符串,也可以替换为’^’连接则结果为2015^04^29,也可以替换为’-‘则结果为2015-0…

    2022年6月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号