vue事件监听

news2024/9/24 9:21:59

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的


1.回车事件(点击回车触发)

@confirm   适用uni-app 

@keyup.enter  适用vue3

运用场景:通常在文本框输入的时候使用


2.点击事件(鼠标左键点击指定区域触发)

@click 

运用场景:用户登陆,按钮点击


3.更改事件 (值更改触发)

@change

运用场景:通常用于文本框的值被修改的时候进行验证


4.失去焦点事件(鼠标点击之后视为聚焦,鼠标点击另一块区域视为失去焦点)

@blur

运用场景:通常用于文本框失去焦点后验证


5.获得焦点事件

@focus

运用场景:通常用于选中某些区域之后进行高亮提示


5.输入框内容变化事件

@input

运用场景:可以实现输入框输入后,下面动态生成相关内容


6.提交事件 (表单提交的时候触发)

@submit

运用场景


7.滚动事件 (滚动条滚动触发)

@scroll

运用场景


8.下拉刷新事件  (uni-app独有)

@pullingDown 

运用场景:数据刷新,加载更多


9.触底事件 (uni-app独有)

@reachingBottom

运用场景:可以加载更多的数据,触底提示是否回到顶部


 补充:

为什么使用v-for要定义  :key="" 

<view class="forBody" v-for="(item,index) in arrs" :key="item.id">
			
</view>

解释:

1.提高性能:

Vue 使用 key 来追踪每个节点的身份,这样就可以在更新列表时更高效地复用和重新排序现有元素,而不是每次都重新渲染整个列表。这有助于减少不必要的DOM操作,从而提高性能。

2.避免警告:

如果不为每个项指定唯一的 key,Vue 会发出警告,提示你添加 key。这是因为没有 key 会导致渲染问题,尤其是在涉及到状态管理或者动画效果时。

3.确保状态:

当列表中的数据发生变化时,Vue 会根据 key 的唯一性来判断哪些元素需要更新或移动。如果没有提供 key 或者提供的 key 不唯一,则可能导致组件状态混乱,例如计数器或其他动态数据可能不会按预期工作

因此,在使用 v-for 时,推荐为每个项提供一个唯一的 key 值,以确保正确的渲染行为和最佳性能。

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

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

相关文章

基于ZYNQ FPGA+DSP C6678坚固型高性能数据采集与运动控制系统

基于FPGADSP的实时控制系统架构的坚固型高性能运动控制器&#xff0c;支持多通道并行同步实时高速采样&#xff0c;并直接通过底层逐点传递给DSP算法处理&#xff0c;以保证实时性&#xff0c;可以实现高速的逐点控制输出&#xff0c;确保了控制系统能够在多输入多输出高速控制…

PDF文件的读取与合并:使用PyPDF2与ReportLab

目录 一、PyPDF2库基础 1.1 PyPDF2简介 1.2 安装PyPDF2 1.3 读取PDF内容 1.4 合并PDF文件 二、ReportLab库基础 2.1 ReportLab简介 2.2 安装ReportLab 2.3 使用ReportLab生成PDF文本 2.4 ReportLab 与 PyPDF2 结合使用 三、注意事项与最佳实践 3.1 文本提取的局限性…

HW数通IA笔记2-网络参考模型

目录 零、本章主要内容 一、应用和数据 二、网络参考模型与标准协议 2.2 TCP/IP参考模型 2.3 TCP/IP常见协议 2.3.1 应用层 2.3.2 传输层 2.3.3 网络层 2.3.4 数据链路层 2.3.5 物理层 2.4 常见的协议标准化组织 三、数据的通信过程 零、本章主要内容 1、理解数据的…

高级MySQL数据库备份脚本

高级MySQL数据库备份脚本 主要功能项目构成credentials.txtsettings.confmysql-dump.sh SFTP备份配置&#xff1a;生成 SSH 密钥对将公钥复制到 SFTP 服务器测试无密码登录 邮件发送配置安装插件sendmail、mailx修改mail配置获取邮箱授权码 如何执行备份执行备份脚本计划每日的…

【数据结构-前缀异或和】力扣1371. 每个元音包含偶数次的最长子字符串

给你一个字符串 s &#xff0c;请你返回满足以下条件的最长子字符串的长度&#xff1a;每个元音字母&#xff0c;即 ‘a’&#xff0c;‘e’&#xff0c;‘i’&#xff0c;‘o’&#xff0c;‘u’ &#xff0c;在子字符串中都恰好出现了偶数次。 示例 1&#xff1a; 输入&…

PyCharm 自定义字体大小

常用编程软件自定义字体大全首页 文章目录 前言具体操作1. 打开设置对话框2. 设置编辑器字体3. 选择外观字体 前言 PyCharm 自定义字体大小&#xff0c;统一设置为 JetBrains Mono 具体操作 【File】>【Settings...】>【Editor】>【Font】 统一设置为字体样式 JetB…

JVM上篇:内存与垃圾回收篇-13-垃圾回收器

笔记来源&#xff1a;尚硅谷 JVM 全套教程&#xff0c;百万播放&#xff0c;全网巅峰&#xff08;宋红康详解 java 虚拟机&#xff09; 文章目录 13. 垃圾回收器13.1. GC 分类与性能指标13.1.1. 垃圾回收器概述13.1.2. 垃圾收集器分类13.1.3. 评估 GC 的性能指标吞吐量暂停时间…

X86架构(五)——栈操作与寻址操作

我们先采用 X86架构(四) 所学知识&#xff0c;在显示器上显示 123...100 ;代码清单7-1;文件名&#xff1a;c07_mbr.asm;文件说明&#xff1a;硬盘主引导扇区代码;创建日期&#xff1a;2011-4-13 18:02jmp near __startmessage db 123...100 __start:mov ax, 0x7c0 ;数据段基…

APP封装安装配置参考说明

APP封装安装配置参考说明 一, 环境准备 宝塔环境 nginx php5.6 mysql5.6 java-openjdk1.8 apktool 1,安装 nginx,php,mysql自行安装 java-openjdk1.8 安装 推荐使用命令行安装 1.1 yum install java-1.8.0-openjdk1.2 yum install -y java-1.8.0-openjdk-devel1.3 设置…

Intellij Idea + Git 完美实战!

环境准备 使用前需要安装一个远程的 Git 仓库和本地的 Git 客户端。由于IDEA中的Git插件需要依赖本地Git客户端&#xff0c;所以需要进行如下配置&#xff1a; 如果本地已有项目&#xff0c;直接通过如下操作&#xff0c;即可在远程自动创建仓库并关联 1. 克隆远程仓库代码&am…

halcon4

图像采集助手-Image Aequisition 1.配置相机IP 和巨型帧等 2.通过海康MVS软件 找到 对应halcon 版本 3. 找到对应halcon版本的 海康相机文件 4.找到Halocn文件目录 粘贴上图文件 通过halcon 助手 -Image Aequisition -自动检测 -找到MVision接口 连接相机 采集图像 实时…

一句话概括TMMi的每个PA

TMMi&#xff08;Test Maturity Model Integration&#xff0c;测试成熟度模型集成&#xff09;是一个由TMMi基金会开发的非商业化的测试成熟度模型&#xff0c;是对CMMI模型的一个补充。它可以帮助组织使测试过程从未管理的状态进化为已管理、已定义、已测量和优化的状态。 T…

网站建设完成后,视频类网站如何做seo

视频类网站的SEO优化是一个综合性的工作&#xff0c;涉及从内容优化、技术优化到外部链接建设等多个方面。由于视频类网站主要提供的是视频内容&#xff0c;其SEO优化不仅需要关注常规的网页优化技巧&#xff0c;还需要考虑视频特有的元素和用户行为模式。以下是针对视频类网站…

Xilinx高速接口之GTP

简介 开坑计划中&#xff0c;主要参考ug482 主要讲解结构以及原语 以及时钟路由和一些其他的 GTP_COMMON还好&#xff0c;需要设置的不多&#xff0c;原语也短&#xff0c; GTP_CHANNEL需要设置的东西真多&#xff0c;原语也长 还好有官方参考例程以及自动生成的原语例化 不然…

0基础学习Python路径(31)logging模块

Python logging 模块定义了为应用程序和库实现灵活的事件日志记录的函数和类。 程序开发过程中&#xff0c;很多程序都有记录日志的需求&#xff0c;并且日志包含的信息有正常的程序访问日志还可能有错误、警告等信息输出&#xff0c;Python 的 logging 模块提供了标准的日志接…

OpenCV绘图函数(4)绘制轮廓线的函数drawContours()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 函数会在图像中绘制轮廓线&#xff0c;如果 thickness ≥ 0&#xff0c;则绘制轮廓线&#xff1b;如果 thickness < 0&#xff0c;则填充由轮…

【JLINK】RTT Viewer 的使用

​​​​​​ 一、使用说明 1.1 查找 RTT 缓冲区的开始位置 echo off if exist .\Debug\%PRJ_NAME%.map (findstr /C:" _SEGGER_RTT" .\Debug\%PRJ_NAME%.map rem findstr /C:" __StackTop " .\Debug\%PRJ_NAME%.map rem findstr /C:" Reset_Handle…

从欧拉公式的美到旋转位置编码RoPE

也许你在某些场合听说过欧拉公式&#xff0c;也许你干脆对数学不感冒。机缘巧合下&#xff0c;你点开了这篇文章&#xff0c;大致浏览了下然后关闭&#xff0c;继续为自己的工作学习忙碌。这不妨碍你暂停忙碌的脚步&#xff0c;欣赏她的美。 若干年后&#xff0c;你应该不曾记得…

Java基础(2)- Java环境

目录 一、jvm和跨平台 二、JDK 和 JRE 三、JDK的下载和安装 四、配置环境变量 一、jvm和跨平台 1.jvm&#xff08;Java虚拟机&#xff09;类似于翻译官&#xff1a;java运行程序的假想计算机&#xff0c;主要运行java程序。 2.跨平台&#xff1a;指不同操作系统。 3.关系…

网上买大流量卡要问哪些问题?几个常见的问与答!

大家都比较关注的几个常见的流量卡问题&#xff0c;答案来喽&#xff01; 这几个问题特别适合刚刚接触流量卡的朋友&#xff0c;如果你在购买流量卡时不知道该了解什么&#xff0c;该向商家问什么的时候&#xff0c;不妨问问这几个问题吧&#xff0c;接下来&#xff0c;这篇文…