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)


相关推荐

  • python网络攻击监测_KRACK Detector 用于检测并防止您网络中KRACK攻击的Python脚本[通俗易懂]

    python网络攻击监测_KRACK Detector 用于检测并防止您网络中KRACK攻击的Python脚本[通俗易懂]KRACKDetectorKRACKDetectorisaPythonscripttodetectpossibleKRACKattacksagainstclientdevicesonyournetwork.ThescriptismeanttoberunontheAccessPointratherthantheclientdevice…

  • 快速解决Android中的selinux权限问题

    快速解决Android中的selinux权限问题关于selinux的详细资料,请查阅http://blog.csdn.net/innost/article/details/19299937在Android开发的过程中,遇到关于selinux相关的东西,当时还一下子看不懂,现在好像有点眉目了。比如,内核打印这个提示type=1400audit(32.939:25):avc:denied{open}forpid=2…

  • 干货!java文件上传判重姿势浅谈

    干货!java文件上传判重姿势浅谈一、场景:文件上传,用户极有可能上传重复文件,内容完全一致。如果对上传的文件未做任何处理,对于文件存储系统来说将是灾难,大量重复的数据,如果允许上传大文件,那么对于存储资源将是巨大的浪费。对于重复的文件,只需要复制相应的访问地址即可,源文件可无需上传,既减轻了网络带宽压力,也减少了存储容量的压力。二、应对:1、通过文件名判重。非特殊情况下,不会采用这种方案,理由跟人同名一样,文件名很容易重复,随着用户上升,概率会变大。采用此方案极易导致不能达到判重的目的。2、读取文件头加部分内容。这种方案可以解

  • 分布式

    分布式

  • Layui 弹出层插件

    Layui 弹出层插件Layui弹出层插件开发工具与关键技术:VisualStudio2015–Layui作者:廖亚星撰写时间:2019年6月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很多的弹出层,这能使用户在一个页面中执行更多的操作,而我的项目里面用的弹出层是Layui里面的弹出层插件。Layui的弹出层插件可以作为独立组件使用,也可以Layui模块化使用基本参数:type—…

  • 1. C语言—输出格式大全[通俗易懂]

    1. C语言—输出格式大全[通俗易懂]1.C语言—输出格式大全#include<stdio.h>intmain(){ //1.整形输出 inta=298;//输出十进制用%d printf(“1.十进制: a=%d\n”,a);//只能采用英文双引号格式,不能用单引号 //2.输出八进制用%o printf(“2.八进制:a=%o\n”,a); //3.使用%#o,可以输出八进制数的前导符(在八进制数前面加一个0,用来标识八进制数), printf(“3.前导

发表回复

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

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