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。

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 批量修改文件扩展名(批处理)

    批量修改文件扩展名(批处理)

    2021年11月17日
  • GeoReference

    GeoReference

  • 拓扑图怎么看_拓扑排序算法图解

    拓扑图怎么看_拓扑排序算法图解一条单向的铁路线上,依次有编号为 1, 2, …, n 的 n 个火车站。每个火车站都有一个级别,最低为 1 级。现有若干趟车次在这条线路上行驶,每一趟都满足如下要求:如果这趟车次停靠了火车站 x,则始发站、终点站之间所有级别大于等于火车站 x 的都必须停靠。(注意:起始站和终点站自然也算作事先已知需要停靠的站点)例如,下表是 5 趟车次的运行情况。其中,前 4 趟车次均满足要求,而第 5 趟车次由于停靠了 3 号火车站(2 级)却未停靠途经的 6 号火车站(亦为 2 级)而不满足要求。现有 m

  • SPI接口总结「建议收藏」

    SPI接口总结「建议收藏」一、SPI协议【SerialPeripheralInterface】    串行外围设备接口,是一种高速全双工的通信总线。在ADC/LCD等与MCU间通信。1、SPI信号线    SPI包含4条总线,SPI总线包含4条总线,分别为SS、SCK、MOSI、MISO。(1)SS(SlaveSelect):片选信号线,当有多个SPI设备与MCU相连时,每个设备的这…

  • centOS7安装nginx及nginx配置「建议收藏」

    centOS7安装nginx及nginx配置「建议收藏」安装所需插件1、安装gccgcc是linux下的编译器在此不多做解释,感兴趣的小伙伴可以去查一下相关资料,它可以编译C,C++,Ada,ObjectC和Java等语言命令:查看gcc版本gcc-v一般阿里云的centOS7里面是都有的,没有安装的话会提示命令找不到,安装命令:yum-yinstallgcc2、pcre、pcre-…

  • aop动态代理机制有哪些_aop和动态代理的关系

    aop动态代理机制有哪些_aop和动态代理的关系这里的AOP指的是面向切面编程思想,而不是SpringAOP。AOP(AspectOrientProgramming),我们一般称为面向方面(切面)编程,作为面向对象的一种补充,用于处理系统中分布于各个模块的横切关注点,比如事务管理、日志、缓存等等。AOP实现主要分为静态代理和动态代理。-静态代理主要是`AspectJ`-动态代理主要是`SpringAOP`

发表回复

您的电子邮箱地址不会被公开。

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