网站首页顶部图片尺寸,天津商城网站设计公司,百度公司招聘信息,兰州网站建设平台分析Vue中change、input和blur、focus的区别及keyup介绍 1. change、input、blur、focus事件2. keyup事件3. 补充#xff1a;el-input的change事件自定义传参 1. change、input、blur、focus事件 change在输入框发生变化且失去焦点后触发#xff1b; input在输入框内容发生变化后… Vue中change、input和blur、focus的区别及keyup介绍 1. change、input、blur、focus事件2. keyup事件3. 补充el-input的change事件自定义传参 1. change、input、blur、focus事件 change在输入框发生变化且失去焦点后触发 input在输入框内容发生变化后触发在界面加载数据以前 blur失去焦点就触发 focus获得焦点就触发
注意 change先于blur input和change的默认参数为输入内容而blur的默认参数为dom节点。
在搜索下拉框选择数据后即刻搜索的案例
!-- 下拉搜索框 --el-select v-modellistQuery.productIdclearable placeholder请选择协议号filterable classfilter-itemchangehandleFilter //添加change事件并调用筛选函数handleFilter()el-optionv-foritem in productList:keyitem.id:labelitem.productId:valueitem.productId:titleitem.productIdstylewidth: 200px/el-option/el-select2. keyup事件
Vue中的keyup键盘事件是按键松开当指定的按键松开会触发的事件可以监听不同的按键响应。
事件代码事件描述keyup.enter回车按键松开keyup.left左键按键松开keyup.right右键按键松开keyup.up上键按键松开keyup.down下键按键松开keyup.delete删除按键松开
在输入框输入数据并按下enter键后进行筛选示例如下
el-input v-modellistQuery.nameParam maxlength30 placeholder请输入手机号或用户名 stylewidth: 200pxclassfilter-item clearable clearhandleFilter //用户点击清空按钮则调用筛选函数返回所有列表keyup.enter.nativehandleFilter / //输入后按enter键则调用筛选函数返回满足条件的列表click可清空的单选模式下用户点击清空按钮时触发
3. 补充el-input的change事件自定义传参
无效传参
changechange(val, index)有效传参
change((val){change(val, index)})div v-for(item,index) in itemListel-inputv-modelitem.valuechange((val){doSomething(val, index)})/el-input/div
