Vue中的事件处理

一,基本使用

1.使用v-on:事件名或者@事件名绑定事件

常见的事件有:

onclick, 鼠标单击事件; ondblclick, 鼠标双击事件;onmousedown,鼠标按下去的事件;onmouseup,鼠标弹起事件;

onmouseover,onmouseenter,onmouseout,onmouseleaveonmousemove 监控鼠标的移入移出,以及移动事件

onkeydownonkeyuponkeypress 监控键盘的按下和弹起。

这里把on改为@即可

2.eg:@click="show"这样的写法默认会传一个事件的参数,如果写成@click="show(a)",这样就会把默认的事件参数取消掉,如果还想再把event参数传过去,就必须使用@click="show(a,$event)"才可以

二,常用的事件修饰符

.stop 阻止事件继续传播。

#阻止事件冒泡
<a @click.stop="toNext">前往下一页</a>.stop 相当于在 toNext 方法上执行了 e.stopPropagation && e.cancelBubble = true;

.prevent 阻止标签的默认事件。

#阻止默认事件行为。
<a @click.prevent="toNext">.prevent 相当于在 toNext 方法上执行了 e.preventDefault(),IE: e.returnValue = false;

.capture 添加事件监听器使用事件捕获模式,即处理顺序从body->目标元素。

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

.self 判断event.target是自己触发的,还是子元素冒泡过来的。.self就只接受自己触发的事件。

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

.once 表示点击事件只触发一次。

#vue版本2.1.0 点击事件将只会触发一次. <a v-on:click.once="doThis"></a>

三,按键事件的常用键

 

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

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

相关文章

巧妙使用 CSS 渐变来实现波浪动画

目录 一、波浪的原理 二、曲面的绘制 三、波浪动画 四、文字波浪动画 五、总结一下 参考资料 之前看到coco[1]的这样一篇文章&#xff1a;纯 CSS 实现波浪效果&#xff01;[2]&#xff0c;非常巧妙&#xff0c;通过改变border-radius和不断旋转实现的波浪效果&#xff0c…

MiniGPT4系列之二推理篇命令行方式:在RTX-3090 Ubuntu服务器推理详解

MiniGPT4系列之一部署篇&#xff1a;在RTX-3090 Ubuntu服务器部署步骤详解_seaside2003的博客-CSDN博客 MiniGPT4系列之二推理篇命令行方式&#xff1a;在RTX-3090 Ubuntu服务器推理详解_seaside2003的博客-CSDN博客 MiniGPT4系列之三模型推理 (Web UI)&#xff1a;在RTX-309…

中国国债发行数据集(2002-2023)

国债是由国家发行的债券&#xff0c;由于国债的发行主体是国家&#xff0c;所以它具有最高的信用度&#xff0c;被公认为是最安全的投资工具。国债按照交易市场的不同分为三类&#xff0c;即银行间市场国债、交易所市场国债和柜台市场国债&#xff1b;按照交易方式的不同分为三…

git使用问题记录-权限

注意点&#xff1a; 1、在远程仓库中直接创建项目时&#xff0c;默认分支为main 2、git push报错 原因&#xff1a;即使是项目文件的创建者&#xff0c;但上层目录的权限为developer&#xff0c;无法push项目&#xff0c;找上层管理员修改权限为maintainer或owner可push代码…

电路分析 day01 一种使能控制电路

本次分析的电路为 一种使能控制电路 &#xff08;站在别人的肩膀上学习&#xff09; 资料来源 &#xff1a; 洛阳隆盛科技有限责任公司的专利 申请号&#xff1a;CN202022418360.7 1.首先查看资料了解本次电路 1.1 电路名称&#xff1a; 一种使能控制电路 1.2 电路功能…

C++基础算法高精度篇

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C算法 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 主要讲解了高精度算法的四种常用的计算 文章目录 Ⅲ. 高精度Ⅲ. Ⅰ . …

【外卖系统】环境的搭建

搭建数据库 1.创建数据库&#xff0c;名字叫reiggie 2.导入数据库 创建Maven项目 1.创建项目 2.检查项目新建的是否有问题 3.导入pom.xml文件 4.导入application.yml文件 在从gittee上down的代码的基础上&#xff0c;修改一下端口号&#xff0c;数据库的名称什么的 …

传输层协议—网络

文章目录 1.TCP1.1TCP协议段格式1.2可靠机制1.2.1确认应答机制1.2.2超时重传机制1.2.3连接管理机制1.2.4流量控制机制1.2.5拥塞控制机制 1.3效率机制1.3.1滑动窗口机制1.3.2延迟应答机制1.3.3捎带应答机制 1.4粘包问题&#xff08;tcp问题&#xff0c;应用层的数据包&#xff0…

【uni-app】常用图标、头像汇总

在做小程序的时候&#xff0c;有时候需要各种图标和头像素材&#xff0c;而百度一堆基本都是收费的。所以&#xff0c;整理一些免费好用的图标&#xff0c;头像库&#xff1a; 1、iconfont-阿里巴巴矢量图标库 基本上常用的矢量图标&#xff0c;在这儿都有&#xff0c;而且可…

rt-thread rtc设备驱动开发

基于pico rtc设备驱动开发 I/O设备框架RTC设备功能配置——启用Soft RTC功能配置——启用NTP时间自动同步功能配置——启用硬件RTC RT-Thread 的 RTC &#xff08;实时时钟&#xff09;设备为操作系统的时间系统提供了基础服务。应用层对于 RTC 设备一般不存在直接调用的 API &…

基于ZYNQ阵列涡流检测系统硬件设计(一)

为实现阵列涡流检测系统总体功能&#xff0c;需研制一套多通道信号采集硬件系统&#xff0c;以搭配 软件编程实现分时激励和分时采集。基于以上要求&#xff0c;本章介绍了阵列涡流检测系统的硬 件模块设计。 3.1 阵列涡流检测系统总体设计 阵列涡流检测系统需要利用 DA …

分布式软件架构——传输链路

传输链路 链路指无源的点到点的物理连接。链路是计算机网络中的一个重要概念&#xff0c;它指的是连接两个网络设备的物理或逻辑路径。简单来说&#xff0c;链路就是电信号或数据在网络中传输的路径。在计算机网络中&#xff0c;链路可以分为物理链路和逻辑链路两种。物理链路…

【UI自动化测试】appium+python+unittest+HTMLRunner

进阶Python接口自动化测试必备教程&#xff08;2023全网最详细&#xff09; 简介 获取AppPackage和AppActivity 定位UI控件的工具 脚本结构 PageObject分层管理 HTMLTestRunner生成测试报告 启动appium server服务 以python文件模式执行脚本生成测试报告 下载与安装 下载需要自…

举例说明基于线性回归的单层神经网络网络(以梯度下降算法来求解权重的过程)...

我们将通过一个简单的例子来说明基于线性回归的单层神经网络&#xff0c;以及如何使用梯度下降算法来求解权重。 假设我们有以下数据集&#xff0c;表示学生的学习时间&#xff08;小时&#xff09;与他们的考试分数&#xff1a; 学习时间&#xff08;X&#xff09;&#xff1a…

线程池学习(五)线程工厂、线程池工厂

Executors 定义的Executor, ExecutorService, ScheduledExecutorService, ThreadFactory和Callable类的工厂和实用程序方法&#xff0c;我们称为线程池工厂。ThreadFactory 为定制化创建新线程的对象,我们称为线程工厂 前面几期的学习中&#xff0c;我已经初步会使用线程池了&…

MySQL内置函数

内置函数从实现的功能角度可以分为数值函数、字符串函数、日期和时间函数、流程控制函数、加密与解密函数&#xff0c;获取MySQL信息函数、聚合函数等。 1.数值函数 来源&#xff1a; 版权声明&#xff1a;本文为CSDN博主「清风拂来水波不兴」的原创文章&#xff0c;遵循CC 4…

Ceph简介及部署

Ceph Ceph一、存储基础1、单机存储设备2、Ceph 简介3、Ceph 优势5、Ceph 架构6、Ceph 核心组件7、OSD 存储后端8、Ceph 数据的存储过程9、Ceph 版本发行生命周期10、Ceph 集群部署 二、部署ceph-deploy Ceph 集群前环境配置1、关闭 selinux 与防火墙2、根据规划设置主机名3、配…

数据中心水浸事件,该如何找回安全?

数据中心是现代企业和组织中不可或缺的基础设施&#xff0c;承载着大量的敏感数据和关键业务运作。然而&#xff0c;水浸事件可能成为数据中心的巨大威胁&#xff0c;可能导致设备故障、数据丢失以及业务中断&#xff0c;给组织带来严重的损失和风险。 因此&#xff0c;为了保护…

gd32f103vbt6 串口OTA升级3-linux端的部分

一. 简介 本文主要是对linux端升级单片机程序的功能部分做一些介绍&#xff0c;包括一些软件流程。 二.硬件部分 2.1 rk3399cpugd32f103 2.2 连接方式&#xff1a;串口&#xff08;115200&#xff0c;8N1&#xff09;或者iic&#xff08;本文没有介绍iic&#xff09; 三、其…

WebRTC不同方案对比

1.功能上会有一些出入&#xff0c;尤其是国内的metaRTC版本迭代很快&#xff0c; 2.后续的ffmpeg也在进行支持webrtc特性&#xff0c;obs新的版本好像已经支持了webrtc&#xff0c; 3.对于webrtc部分缺少的信令部分的标准化也有了对应的标准whip和whep协议 所以&#xff0c;如…