Vue中@change、@input和@blur、@focus的区别及@keyup介绍

2024-02-16 06:52

本文主要是介绍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介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/713821

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

分辨率三兄弟LPI、DPI 和 PPI有什么区别? 搞清分辨率的那些事儿

《分辨率三兄弟LPI、DPI和PPI有什么区别?搞清分辨率的那些事儿》分辨率这个东西,真的是让人又爱又恨,为了搞清楚它,我可是翻阅了不少资料,最后发现“小7的背包”的解释最让我茅塞顿开,于是,我... 在谈到分辨率时,我们经常会遇到三个相似的缩写:PPI、DPI 和 LPI。虽然它们看起来差不多,但实际应用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali