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>

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

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

相关文章

conda env退回到之前的版本

默认显示的是 base 环境的历史记录 conda list --revisions 回到第 N 个版本 conda install --revision N 显示指定环境的修改记录 conda list -n env_name -r

机器学习3----决策树

这是前期准备 import numpy as np import pandas as pd import matplotlib.pyplot as plt #ID3算法 #每个特征的信息熵 # target : 账号是否真实&#xff0c;共2种情况 # yes 7个 p0.7 # no 3个 p0.3 info_D-(0.7*np.log2(0.7)0.3*np.log2(0.3)) info_D #日志密度…

Rust 原生类型

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、标量类型&#xff08;scalar type&#xff09;二、 复合类型&#xff08;compound type&#xff09;总结 前言 Rust 学习系列 &#xff0c;rust中的原生类…

算法学习——LeetCode力扣回溯篇4

算法学习——LeetCode力扣回溯篇4 332. 重新安排行程 332. 重新安排行程 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票…

django中的中间件

在Django中&#xff0c;中间件&#xff08;Middleware&#xff09;是一个轻量级的、底层的“插件”系统&#xff0c;用于全局地修改Django的输入或输出。每个中间件组件都负责执行一些特定的任务&#xff0c;比如检查用户是否登录、处理日志、GZIP压缩等。Django的中间件提供了…

Vulnhub靶机:DC4

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;DC4&#xff08;10.0.2.57&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/dc-4,313/…

Midjourney绘图欣赏系列(一)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

【从Python基础到深度学习】7. 使用scp命令实现主机间通讯

一、生成 SSH 密钥对 ssh-keygen 是一个用于生成 SSH 密钥对的命令行工具&#xff0c;用于身份验证和加密通信 ssh-keygen 二、将本地主机上的 SSH 公钥添加到远程主机 ssh-copy-id 命令用于将本地主机上的 SSH 公钥添加到远程主机上的 authorized_keys 文件中&#xff0c;…

【初学者必看】迈入Midjourney的艺术世界:轻松掌握Midjourney的注册与订阅!

文章目录 前言一、Midjourney是什么二、Midjourney注册三、新建自己的服务器四、开通订阅 前言 AI绘画即指人工智能绘画&#xff0c;是一种计算机生成绘画的方式。是AIGC应用领域内的一大分支。 AI绘画主要分为两个部分&#xff0c;一个是对图像的分析与判断&#xff0c;即…

MySQL定时备份及清理脚本(一劳永逸)-改良版本

一 创建备份路径 cd /mysql-backup mkdir back cd back 二 创建日志文件 vi mysql-backlog.log 内容为空&#xff0c;保存 三 创建备份脚本 vi save-all-data.sh#!/bin/bash #source /etc/profile user"root" password"LXYlxy2:024.#8u}" host"127…

QlikSense财务聚合函数:IRR/NPV/XIRR/XNPV

IRR - 脚本函数 IRR() 函数用于返回聚合内部回报率&#xff0c;以揭示迭代于 group by 子句定义的大量记录上的表达式的数值表示的现金流系列。 这些现金流不必是均值&#xff0c;因为它们可用于年金。但是&#xff0c;现金流必须定期出现&#xff0c;例如每月或每年。内部收…

LeetCode879. Profitable Schemes——动态规划

文章目录 一、题目二、题解 一、题目 There is a group of n members, and a list of various crimes they could commit. The ith crime generates a profit[i] and requires group[i] members to participate in it. If a member participates in one crime, that member ca…

《合成孔径雷达成像算法与实现》Figure6.12

clc clear close all参数设置 距离向参数设置 R_eta_c 20e3; % 景中心斜距 Tr 2.5e-6; % 发射脉冲时宽 Kr 20e12; % 距离向调频率 alpha_os_r 1.7; % 距离过采样率 Nrg 320; % 距离线采样数 距离向…

【头歌·计组·自己动手画CPU】三、存储系统设计(HUST)(理论版) 【计算机硬件系统设计】

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎 ❤️关注 &#x1f44d;点赞 &#x1f64c;收藏 ✍️留言 文章目录 一、课程设计目的二、课程设计内容三、课程设计步骤四、课程设计总结 一、课程设计目的 理解计算机…

猫头虎分享:2024年值得程序员关注的技术发展动向分析

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

HarmonyOS鸿蒙学习基础篇 - Column/Row 组件

前言 Row和Column组件是线性布局容器&#xff0c;用于按照垂直或水平方向排列子组件。Row表示沿水平方向布局的容器&#xff0c;而Column表示沿垂直方向布局的容器。这些容器具有许多属性和方法&#xff0c;可以方便地管理子组件的位置、大小、间距和对齐方式。例如&#xff0c…

从C向C++7——继承

一.继承 1.理解继承 C中的继承是类与类之间的关系&#xff0c;是一个很简单很直观的概念&#xff0c;与现实世界中的继承类似&#xff0c;例如儿子继承父亲的财产。 继承可以理解为一个类从另一个类获取成员变量和成员函数的过程。例如类 B 继承于类 A&#xff0c;那么 B 就…

共享指针在项目中实际的用法

共享指针是 C 中一种智能指针&#xff0c;用于管理动态内存。它可以有效防止内存泄漏和悬空指针问题。在实际项目中&#xff0c;共享指针有以下几种常见的用法&#xff1a; 1. 管理对象的生命周期 共享指针可以用来管理对象的生命周期。当最后一个共享指针指向的对象时&#…

Android 10.0 展讯平台长按power电源键开机时间修改

1.前言 在10.0的系统产品开发中,在产品关机的情况下,长按power电源键的情况下,会开启机器然后进入开机流程中,否则就不会开机 ,但是为了防误撞,误开机要求延长长按power电源键开机时间,所以就需要从kernel中来分析下长按开机的相关源码来实现 相关的功能 2.展讯平台长…

2024/2/14

指针练习 1、选择题 1.1、若有下面的变量定义&#xff0c;以下语句中合法的是&#xff08; A &#xff09;。 int i&#xff0c;a[10]&#xff0c;*p&#xff1b; A&#xff09; pa2; B&#xff09; pa[5]; C&#xff09; pa[2]2; D&#xff09; p&(i…