vue中输入框事件的使用——@input、@keyup.enter、@change、@blur

一、@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。