@input &@change& @blur 区别

郝思文
• 阅读 2332

总结下el-input 中事件@input 与@change 的不同: @input 是当值输入时就触发; 而@change 是当值变化且失去焦点时触发通@blur, 只是回调的参数不一样
看代码

<el-input
                  id="testId"
                  v-model="test.testId"
                  @input="handleInput"
                  @blur="handleBlur"
                  @change="handleChange" 
                  >
               </el-input>
 handleBlur(event){
      console.log("blur=", event.target.id)
      console.log("blur value=", this.test[event.target.id])
    },
    handleInput(val){
      console.log("input=", val)
    },

    handleChange(val){
      console.log("change=", val)
    },

结果

input= a
input= ab
input= abc
change= abc
blur= testId
blur value= abc
点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
盘点JavaScript focus/blur(聚焦)实际应用
大家好,我进阶学习者。一、前言当用户点击某个元素或使用键盘上的Tab键选中时,该元素将会获得聚焦(focus)。当网页加载时,HTML特性(attribute)。autofocus也可以让一个焦点落在元素上,不仅如此,还有其它途径可以获得焦点。二、focus/blur事件当元素聚焦时,会触发focus事件,当元素失去焦点时,会触发blur事件。
晴空闲云 晴空闲云
3年前
JavaScript中MutationObServer监听DOM元素详解
DOM的MutationObServer接口,可以在DOM被修改时异步执行回调函数,我的理解就是可以监听DOM修改。基本使用可以通过MutationObserver构造函数实例化,参数是一个回调函数。jsletobservernewMutationObserver(()console.log("change"));console.log(obs
达里尔 达里尔
2年前
遇到的问题及解决方案
Vue下拉框赋值之后,点击下拉框没反应vuechange(){//在下拉框触发的change事件加上下面这段代码,重载this.$forceUpdate()}Vue3Htmljs
Easter79 Easter79
3年前
vue element
1.真正理解vmodelinput元素上的vmodel其实是一个语法糖,其真正作用有两个:(1)创建一个props,其键为value;(2)监听input事件,改变value。键名与事件名都可以另外设置。当定义一个组件时,vmodel是绑定在input的外层的,所以需要手动实现vmodel。2.provide/injectprov
LinMeng LinMeng
4年前
解决ios软键盘收回时屏幕空白问题
添加事件:window.scrollTo(x,y)在input的释焦事件中添加blur事件,参数X要在窗口文档显示区左上角显示的文档的x坐标。参数y要在窗口文档显示区左上角显示的文档的y坐标。添加jQuery插件mounted(){//解决ios软键盘弹出屏幕空白$("input,select,te
Stella981 Stella981
3年前
ReactNative遇到的坑总结(持续更新)
问题:在Android中input组件,文字会有遮挡在Android中,input组件默认会有内边距,所以把padding改为0可以解决问题问题:在Android中input组件,底部会有条白线添加红色的属性underlineColorAndroid<TextInputplaceholder"搜索关键字"
Stella981 Stella981
3年前
Python中的raw_input()和input()
raw\_input()和input()都是python中的内建函数,用于读取控制台用户的输入,但有所区别:nr@localhostconf$pythonPython2.7.5(default,Aug4201
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Stella981 Stella981
3年前
ELK学习笔记之配置logstash消费kafka多个topic并分别生成索引
0x00 filebeat配置多个topicfilebeat.prospectors:input_type:logencoding:GB2312fields_under_root:truefields:添加字段
Wesley13 Wesley13
3年前
HTML5的表单input元素的新属性
    知识点《HTML5的表单input元素的新属性》,留待学习分享。。。<!HTML5的表单input元素的新属性Autocomplete:自动完成功能Autofocus:自动获取焦点Form:所属表单Required:必填Pattern:验证input的模式placeholder:提示\
Python进阶者 Python进阶者
10个月前
AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【黑科技·鼓包】问了一个Python的问题。问题如下:我也遇到问题了..大佬们知道的帮忙解答下,很奇怪,不知道为什么nicegui库中input输入框的值不能用change改变的模式