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

发布时间 2023-07-11 20:36:09作者: pwindy

1.@input(v-on:input)

此触发方法适合在查询条件或实时规则校验中使用

<input type="text" placeholder="请输入查询内容条件" v-model="inputVal"  v-on:input="search" value="" />

2.@keyup.enter

此触发方法与v-on:input方法区别在于:input事件是实时监控的,每次输入都会触发调用,而@keyup.enter则是在键盘点击回车按键触发,且在手机上端则需要点击输入键盘上的确定按键触发。

3.@change

此触发方法:值发生变化且鼠标失去焦点时触发,在手机端都是要经过触发虚拟键盘的搜索键才会触发事件。

4.@focus

鼠标获得焦点时触发

5.@blur

鼠标失去焦点时触发

 

参考---https://blog.csdn.net/qq_42697806/article/details/127015417