Vue中@change、@input和@blur的区别及@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的区别及@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在输入框内容发生变化后…...
洛谷: P7910 [CSP-J 2021] 插入排序
题目链接:P7910 [CSP-J 2021] 插入排序 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路: 1.定义结构体,将输入数据和它是第几位绑定起来。增加一个数组f[x],记录原来序列中的第x个在新序列中的位置,每执行一次修改操作,我们…...
Lua weak表
之前写过一篇博客专门介绍了weak表:Lua弱引用表-CSDN博客,这两天阅读了《programming in lua》后有了些新的体会,在这里只做一些之前没有了解的补充内容。 定义 Lua 自动进行内存的管理。程序只能创建对象(表,函数等…...
DS:二叉树的顺序结构及堆的实现
创作不易,兄弟们给个三连!! 一、二叉树的顺序存储 顺序结构指的是利用数组来存储,一般只适用于表示完全二叉树,原因如上图,存储不完全二叉树会造成空间上的浪费,有的人又会问,为什么…...
python从入门到精通(十九):python的多线程详细使用
python的多线程详细使用 1.什么是线程2.线程的作用3.导入线程4.创建线程启动线程线程阻塞线程的方法守护线程线程阻塞2个都是守护线程1个是守护线程线程间通信1.什么是线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。一条线程指…...
【More Effective C++】条款19:了解临时对象的来源
临时对象:没有命名,不会出现在源代码中 帮助隐式类型转换成功而创建的对象 编译器创建一个类型为string的临时对象,以buffer作为参数,调用string的构造函数;str绑定到了这个临时对象上函数返回时,这个临时…...
站在C/C++的肩膀速通Java面向对象
默认学过C或C,对变量、表达式、选择、循环都会。 运行特征 解释型语言(JavaScript、Python等) 源文件-(平台专属解释器)->解释器中执行编译型语言(C、Go等) 源文件-(平台编译器)->平台可执行文件Java 源文件-(…...
【AI视野·今日Robot 机器人论文速览 第七十八期】Wed, 17 Jan 2024
AI视野今日CS.Robotics 机器人学论文速览 Wed, 17 Jan 2024 Totally 49 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers Safe Mission-Level Path Planning for Exploration of Lunar Shadowed Regions by a Solar-Powered Rover Authors Olivier L…...
flask cors 跨域问题解决
座右铭:怎么简单怎么来,以实现功能为主。 欢迎大家关注公众号与我交流 环境安装 pip install -U flask-cors 示例代码 from flask import Flask from flask_cors import CORS, cross_originapp Flask(__name__) CORS(app, supports_credentialsTrue)…...
18 19 SPI接口的74HC595驱动数码管实验
1. 串行移位寄存器原理(以四个移位寄存器为例) 1. 通过移位寄存器实现串转并:一个数据输入端口可得到四位并行数据。 通过给data输送0101数据,那么在经过四个时钟周期后,与data相连的四个寄存器的输出端口得到了0101…...
计算机网络概述习题拾遗
学习目标: 自下而上第一个提供端到端服务的层次 路由器、交换机、集线器实现的功能层 TCP/IP体系结构的网络接口层对应OSI体系结构的哪两个层次 分组数量对总时延的影响 如果这篇文章对您有帮助,麻烦点赞关注支持一下动力猿吧! 学习内容…...
你的电脑关机吗
目录 程序员为什么不喜欢关电脑? 电脑长时间不关机会怎样? 电脑卡顿 中度风险 硬件损耗 能源浪费 散热问题 软件问题 网络安全问题 程序员为什么不喜欢关电脑? 大部分人都会选择将电脑进行关机操作。其实这不难理解,毕竟人类都需要…...
flask+python儿童福利院管理系统pycharm毕业设计项目
本系统解决了儿童福利院管理事务中的主要问题,包括首页、个人中心、爱心人士管理、员工管理、后勤人员管理、儿童信息管理、院所风采管理、活动管理、食谱管理、领养流程管理、政策法规管理、楼栋管理、宿舍管理、领养申请管理、义工申请管理、捐赠信息管理、宿舍物…...
React:高阶组件|ref转发
高阶组件 参考文档:高阶组件 – React (reactjs.org) 高阶组件(Higher-Order Components,简称 HOC)是React中用于复用组件逻辑的一种高级技巧。具体而言:高阶组件是参数为组件,返回值为新组件的函数。 组件…...
AI:127-基于卷积神经网络的交通拥堵预测
🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…...
MongoDB聚合操作符:$abs
$abs聚合操作符用于返回数值的绝对值。 语法 { $abs: <数值> }<数值>表达式可以是任何能被解析为数值的合法表达式。 用法 如果$abs的<number>参数被解析为null值或引用不存在的字段,将返回null,如果参数被解析为NaN,也…...
【element-ui】输入框组件el-input输入数字/输出Number类型:type=“number“、v-model.number用法
输入框组件el-input输入数字/输出Number类型 1、基础用法 输入:任何文本 → 输出:String类型 <el-input v-model"inputText"></el-input> <!-- 输入 abc —— inputText输出 "abc" 输入 123 —— inputText输出 …...
算法与数据结构
算法与数据结构 前言 什么是算法和数据结构? 你可能会在一些教材上看到这句话: 程序 算法 数据结构 算法(Algorithm):是指解题方案的准确而完整的描述,是一系列解决问题的清晰指令,算法代…...
C++动态规划-线性dp算法
莫愁千里路 自有到来风 CSDN 请求进入专栏 X 是否进入《C专栏》? 确定 目录 线性dp简介 斐波那契数列模型 第N个泰波那契数 思路: 代码测试: 三步问题 思路: 代码测试: 最小花费爬楼梯 思路…...
基于 Python 深度学习的电影评论情感分析系统,附源码
博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
Kafka主题运维全指南:从基础配置到故障处理
#作者:张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1:主题删除失败。常见错误2:__consumer_offsets占用太多的磁盘。 主题日常管理 …...
高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。
2024 年,高端封装市场规模为 80 亿美元,预计到 2030 年将超过 280 亿美元,2024-2030 年复合年增长率为 23%。 细分到各个终端市场,最大的高端性能封装市场是“电信和基础设施”,2024 年该市场创造了超过 67% 的收入。…...
