vue中输入框事件的使用——@input、@keyup

 2024-02-20 04:02:04  阅读 0

1.@input(或v-on:input)

使用:


适合实时查询,每次输入字符都会触发该事件。 如图所示:

2.@keyup.enter

该事件与 v-on:input 事件的区别在于,input 事件是实时监听的,每次输入都会调用,而 @keyup.enter 事件是通过点击 PC 上的 Enter 键来触发,并且手机上需要点击输入键盘上的确定键才能触发。

三,@

该事件与enter事件类似。 在手机上,通过触发虚拟键盘的搜索键来触发该事件。 使用方法与输入事件相同。

注意:ios手机可能会出现问题:

如果想要的效果是调用查询接口查询输入值,而不使用虚拟键盘触发方式,那么在手机上不会有问题,但在iOS手机上会出现多次触发。

简单的解决方案:

监听输入值(watch),监听变化时调用原本需要绑定到输入框的事件。

4.@blur(失焦)

为了满足输入完成并移动到其他地方时验证输入框的需要,需要使用该事件。 只需要使用这个事件来绑定验证方法即可。

注意:如果使用mt-field标签并要执行相应的blur(失焦)事件,则应使用@blur..=""而不是@blur。


注意:在中间输入框el-input中,直接使用@click事件是无效的。 这时候就需要添加一个修饰符,即:@click。

标签: input 输入框 vue

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码