Vue中@change、@input和@blur、@focus的区别及@keyup介绍

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-model="listQuery.productId"clearable placeholder="请选择协议号"filterable class="filter-item"@change="handleFilter"   //添加@change事件,并调用筛选函数handleFilter()><el-optionv-for="item in productList":key="item.id":label="item.productId":value="item.productId":title="item.productId"style="width: 200px"></el-option></el-select>

2. @keyup事件

Vue中的@keyup(键盘事件)是按键松开,当指定的按键松开会触发的事件,可以监听不同的按键响应。

事件代码事件描述
@keyup.enter回车按键松开
@keyup.left左键按键松开
@keyup.right右键按键松开
@keyup.up上键按键松开
@keyup.down下键按键松开
@keyup.delete删除按键松开

在输入框输入数据并按下enter键后进行筛选示例如下:

<el-input v-model="listQuery.nameParam" maxlength="30" placeholder="请输入手机号或用户名" style="width: 200px"class="filter-item" clearable @clear="handleFilter"   //用户点击清空按钮则调用筛选函数,返回所有列表@keyup.enter.native="handleFilter" />  //输入后按enter键则调用筛选函数,返回满足条件的列表

@click:可清空的单选模式下用户点击清空按钮时触发

3. 补充:el-input的@change事件自定义传参

  • 无效传参
@change="change(val, index)"
  • 有效传参
@change="((val)=>{change(val, index)})"
<div v-for="(item,index) in itemList"><el-inputv-model="item.value"@change="((val)=>{doSomething(val, index)})"></el-input></div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/683814.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QRegExp的学习

【QT学习】QRegExp类正则表达式&#xff08;一文读懂&#xff09;-CSDN博客 [ ]:匹配括号内输入的任意字符 例&#xff1a;[123]:可以是1或2或3 {m&#xff0c;n}表达式至少重复m次&#xff0c;至多重复n次。 例&#xff1a;"ba{1,3}"可以匹配 "ba"或&…

贪心算法练习day1

练习1--翻硬币 1&#xff09;题目及要求 2&#xff09;解题思路 输入的是字符串&#xff0c;要想将两组字符串进行一一对比&#xff0c;需要将字符串转换成字符数组&#xff0c;再使用for循环依次遍历字符数组&#xff0c;进行比对。 输入两行字符串&#xff0c;转换成两个字…

干货 | 实战演练基于加密接口测试测试用例设计

如果接口测试仅仅只是掌握一些requests或者其他一些功能强大的库的用法&#xff0c;是远远不够的&#xff0c;还需要具有根据公司的业务以及需求去定制化一个接口自动化测试框架能力。所以在这个部分&#xff0c;会主要介绍接口测试用例分析以及通用的流程封装是如何完成的。 首…

Java实现课程案例资源库系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 管理员需求分析2.2 用户需求分析 三、系统设计3.1 业务流程设计3.1.1 管理员业务流程设计3.1.2 用户业务流程设计3.1.3 首页功能模块及业务流程分析3.1.4 案例资源中心功能模块及业务流程分析3.1.5 用户信息中心功能模块…

html从零开始7:文档流、浮动、清除浮动,定位【搬代码】

文档流 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, init…

甲亢和糖尿病有什么关系吗?

甲亢和糖尿病之间的关系是一个备受关注的话题&#xff0c;两者之间确实存在一定的关联。这种关联可以从多个角度进行探讨。 首先&#xff0c;甲亢和糖尿病都是内分泌系统的疾病。甲亢是由于甲状腺激素分泌过多引起的&#xff0c;而糖尿病则是由于胰岛素分泌不足或作用障碍导致…

树莓派4B(Raspberry Pi 4B)使用docker搭建阿里巴巴sentinel服务

树莓派4B&#xff08;Raspberry Pi 4B&#xff09;使用docker搭建阿里巴巴sentinel服务 由于国内访问不了docker hub&#xff0c;而国内镜像仓库又没有适配树莓派ARM架构的sentinel镜像&#xff0c;所以我们只能退而求其次——自己动手构建镜像。本文基于Ubuntu&#xff0c;Jav…

Pycharm配置运行selenium教程

一、下载chrome浏览器和同版本的chromedriver chrome测试版版本120.0.6099.109 链接&#xff1a;https://pan.baidu.com/s/1pvFqL0WN8OkqPmURAs83kg?pwdvtsh 提取码&#xff1a;vtsh chromedriver版本120.0.6099.109 链接&#xff1a;https://pan.baidu.com/s/16fWWkrlD5C3J…

猫头虎分享已解决Bug || TypeError: Cannot read property ‘match‘ of undefined

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Innodb事务的实现

事务的实现 MySQL在进行事务处理的时候采用了日志先行的方式来保证事务可快速和持久运行&#xff0c;在写数据之前&#xff0c;先写日志&#xff0c;开始事务时&#xff0c;会记录该事务的一个LSN日志序列号&#xff1b;当执行事务时&#xff0c;会往Innodb_log_buffer日志缓冲…

c语言操作符(下)

目录 ​编辑 逗号表达式 下标访问[] 函数调⽤() sizeof 结构成员访问操作符 结构体 结构体声明 直接访问 .成员名 间接访问 结构体指针->成员名 逗号表达式 exp1, exp2, exp3, …expN 运算规则&#xff1a;从左向右依次执⾏。整个表达式的结果是最后⼀个表达…

LInux、源码编译安装

步骤&#xff1a; 步骤1&#xff1a;安装开发工具gcc与make&#xff0c;释放源代码至指定目录 yum -y install gcc make 步骤2&#xff1a;tar解包&#xff0c;释放源代码至指定目录 tar -xf /root/tools.tar.gz -C /usr/local 步骤3&#xff1a;./configure 配置&#xff0c;…

网络编程socket相关操作

Socket socket 打开一个网络连接 int socket (int family , int type ,int protocol)family :协议族 , type : 套接字类型 , protocol :协议类型常值 套接字描述符sockfd famliy : AF_INET(IPv4) AF_INET6(IPv6) AF_LOCAL AF_ROUTE type : SOCK_STREAM(字节流套接字) SOCK_…

第一篇【传奇开心果系列】Python的pyttsx3库技术点案例示例:文本转换语言

传奇开心果短博文系列 系列短博文目录Python的pyttsx3库技术点案例示例系列 短博文目录前言一、pyttsx3主要特点和功能介绍二、pyttsx3文字转语音操作步骤介绍三、多平台支持介绍和示例代码四、多语言支持介绍和示例代码五、自定义语言引擎介绍和示例代码六、调整语速和音量介绍…

Transformer?

Transformer模型是一种深度学习架构&#xff0c;它在2017年由Vaswani等人在论文《Attention is All You Need》中首次提出。这种架构特别适用于处理序列数据&#xff0c;如文本、音频或时间序列数据&#xff0c;因此在自然语言处理(NLP)、语音识别和时序分析等领域有着广泛的应…

姿态传感器MPU6050模块之陀螺仪、加速度计、磁力计

MEMS技术 微机电系统&#xff08;MEMS, Micro-Electro-Mechanical System&#xff09;&#xff0c;也叫做微电子机械系统、微系统、微机械等&#xff0c;指尺寸在几毫米乃至更小的高科技装置。微机电系统其内部结构一般在微米甚至纳米量级&#xff0c;是一个独立的智能系统。 微…

Win11 Android studio 打开新项目提示 Microsoft Defender configuration 问题解决

Microsoft Defender configuration The IDE has detected Microsoft Defender with Real-Time Protection enabled. It might severely degrade IDE performance. It is recommended to make sure the following paths are added to the Defender folder exclusion list 。。…

[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.

[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.——> Vue报错&#xff0c;key关键字不唯一&#xff1a; 解决办法&#xff1a;修改一下重复的id值&#xff01;&#xff01;&#xff01;

线性回归:大体介绍

线性回归是一种常见的统计学和机器学习方法&#xff0c;用于建立一个线性关系模型来预测一个连续型目标变量。它假设自变量和因变量之间存在线性关系&#xff0c;并且通过最小化预测值与实际观测值之间的差异来确定最佳拟合直线。 线性回归模型可以表示为&#xff1a;Y β0 …

IMX6ULL移植U-Boot 2022.04

目录 目录 1.编译环境以及uboot版本 2.默认编译测试 3.uboot中新增自己的开发板 3.编译测试 4.烧录测试 5.patch文件 1.编译环境以及uboot版本 宿主机Debian12u-boot版本lf_v2022.04 ; git 连接GitHub - nxp-imx/uboot-imx: i.MX U-Boot交叉编译工具gcc-arm-10.3-2021.0…