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技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式:Python 中的懒加载与自定义初始化参数 在软件开发中,单例模式(Singleton Pattern)是一种常见的设计模式,确保一个类仅有一个实例,并提供一个全局访问点。在多线程环境下,实现单例模式时需要注意线程安全问题,以防止多个线程同时创建实例,导致…...
