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 -…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
前端工具库lodash与lodash-es区别详解
lodash 和 lodash-es 是同一工具库的两个不同版本,核心功能完全一致,主要区别在于模块化格式和优化方式,适合不同的开发环境。以下是详细对比: 1. 模块化格式 lodash 使用 CommonJS 模块格式(require/module.exports&a…...
