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>
相关文章:
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在输入框内容发生变化后…...
Raspbian简易RTSP服务
Raspbian简易RTSP服务 1. 源由2. 搭建简易RTSP服务器2.1 系统安装2.2 软件安装2.3 命令介绍2.3.1 libcamera-hello2.3.2 libcamera-vid2.3.3 cvlc 3. 实测4. 参考资料 1. 源由 鉴于前期的一些准备工作: 《ArduPilot开源飞控之Companion Computers简单分析》《Ardu…...
【ASP.NET 6 Web Api 全栈开发实战】--前言
《ASP.NET 6 Web Api 实战》专栏通过一步一步的开发并完善一个记账软件项目,来引导大家学习相关的知识,其中的知识包括但不限于如下内容: Web Api 开发.NET 6 项目微服务架构的搭建身份认证移动端应用开发more。。。 专栏结构 专栏分为单体…...
跳过mysql8.0密码重置密码 Shell脚本
要在 MySQL 8.0 中通过 Shell 脚本跳过密码验证以重置密码,你可以遵循以下步骤:首先,确保你有足够的权限来编辑配置文件和重启 MySQL 服务。下面是一个简单的 Shell 脚本示例,该脚本展示了如何跳过密码验证以重置 MySQL 8.0 的 ro…...
Maven之安装自定义jar到本地Maven仓库中
Maven之安装自定义jar到本地Maven仓库中 文章目录 Maven之安装自定义jar到本地Maven仓库中1. 命令行窗口安装方式1. 常用参数说明2. 安装实例 2. IDEA中安装方式3. 使用 1. 命令行窗口安装方式 安装指定文件到本地仓库命令:mvn install:install-file; 在windows的cm…...
SPI控制8_8点阵屏
协议与硬件概述 SPI SPI是串行外设接口(Serial Peripheral Interface)的缩写。是一种高速的(10Mbps)的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线。 引脚介绍 SCLK:…...
2.10
头文件: #include <sqlite3.h> 编译时候要加上-lsqlite3 gcc a.c -lsqlite3 1)sqlite3_open 打开一个数据库,如果数据库不存在,则创建一个数据库 2)sqlite3_close 关闭数据库,断开句柄所拥有的资…...
计算机服务器中了360后缀勒索病毒怎么办?360后缀勒索病毒处理流程
网络技术的不断应用与发展,为企业的生产运营提供了有利保障,越来越多的企业走向数字化办公模式,并且企业的发展离不开数据支撑,重视数据安全成为了众多企业关心的主要话题。春节前后,云天数据恢复中心接到很多企业的求…...
BigDecimal的常用API
BigDecimal用于解决浮点型运算时结果出现失真的问题。 这里0.20.1等于0.3就出现了失真 import java.math.BigDecimal; import java.math.RoundingMode;public class Test {public static void main(String[] args) {//BigDeciaml的使用:解决小数运算失真的问题doub…...
Android---Jetpack Compose学习005
动画 1. 简单值动画 示例:背景颜色在紫色和绿色之间,以动画形式切换。使用 animateColorAsState() val backgroundColor by animateColorAsState(if (tabPage TabPage.Home) Purple100 else Green300) 该句代码中,有一个 backgroundColo…...
安卓价值1-如何在电脑上运行ADB
ADB(Android Debug Bridge)是Android平台的调试工具,它是一个命令行工具,用于与连接到计算机的Android设备进行通信和控制。ADB提供了一系列命令,允许开发人员执行各种操作,包括但不限于: 1. 安…...
第三百四十七回
文章目录 1. 概念介绍2. 原理与方法2.1 知识对比2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"加密包crypto"相关的内容,本章回中将介绍characters包.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 在项目中会遇到获取字…...
23种设计模式之原型模式
目录 什么是原型模式 为什么使用原型模式 原型模式的基本结构 原型模式的实现步骤 实现代码(含注释) 使用场景 什么是原型模式 原型模式是一种创建型设计模式,该模式的核心思想是基于现有的对象创建新的对象,而不是从头开…...
揭秘Angular世界的奥秘:全面提升你的前端开发技能!
介绍:Angular是一个由Google维护的开源JavaScript框架,专为构建Web应用程序而设计,特别适合开发大型单页应用(SPA)。以下是对Angular的详细介绍: 技术栈:Angular使用HTML作为模板语言࿰…...
【开源】SpringBoot框架开发企业项目合同信息系统
目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 合同审批模块2.3 合同签订模块2.4 合同预警模块2.5 数据可视化模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 合同审批表3.2.2 合同签订表3.2.3 合同预警表 四、系统展示五、核心代码5.1 查询合同…...
高斯伪谱C++封装库开源!
Windows x64/86 C无依赖运行高斯伪谱法求解最优控制问题,你只需要ElegantGP! Author: Y. F. Zhang His Github: https://github.com/ZYunfeii 写在前面 这个库在你下载它的那一时刻起不再依赖任何其他代码,直接可用来构建C的最优控制问题并进行求解。…...
Spring + Tomcat项目中nacos配置中文乱码问题解决
实际工作的时候碰到了nacos中文乱码的问题,一顿排查最终还是调源码解决了。下面为具体的源码流程,有碰到的可以参考下。 对于nacos配置来说,初始主要源码就在NacosConfigService类中。里面有初始化获取配置content以及设置对应监听器的操作。…...
Unity SRP 管线【第十讲:SRP/URP 图形API】
Unity 封装的图形API 文章目录 Unity 封装的图形API一、 CommandBuffer 要执行的图形命令列表1. CommandBuffer 属性2. CommandBuffer 常用图形API(方法)(1)设置(2)获取临时纹理 GetTemporaryRT以及释放(3)设置纹理为渲染目标 SetRenderTarget(4)Command…...
使用playwright进行自动化端到端测试
项目希望能接入自动化端到端测试提高可靠性,发现微软的 playwright 还挺好用的,推荐一下,顺便说下遇到的一些难点以及最佳实践。 难点 登录 项目不能帐号密码登录,只能扫二维码 临时方案是先自己扫码保存 cookie 用于测试&#…...
ES实战-相关性搜索
ES打分机制 1.TF-IDF 词频-逆文档频率 2.Okapi BM25 3.随机性分歧- DFR相似度 4.基于信息 - IB相似度 5.LM Dirichlet 相似度 6.LM Jelinek Mercer相似度 解释一个查询的结果集 curl -XPOST localhost:9200/get-together/_search?pretty -H Content-Type: application/json -…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发,后来由Pivotal Software Inc.(现为VMware子公司)接管。RabbitMQ 是一个开源的消息代理和队列服务器,用 Erlang 语言编写。广泛应用于各种分布…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
