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事件

四、@blur(失焦)

要满足输入框在输入完成、移到其他地方进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。

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

　　

内容参考：https://blog.csdn.net/zuoyiran520081/article/details/86611608