当前位置： 首页 > news >正文

v-on/@ 事件处理指令修饰符-stop、prevent、once

news 2025/7/12 11:05:58

v-on/@事件修饰符：

 一、.stop 阻止单机事件继续传播 event.stopProgagetion()

     eg:       

       <h3>事件修饰符</h3>

        <div @click="todo">

            <div @click.stop="doThis">

                单机事件会继续传递

            </div>

        </div>

点击 单机事件会继续传递 文案只会执行doThis 事件，不会执行todo 事件，如下图：

二、 .prevent 阻止事件默认行为

eg:

           <a href="http://www.baidu.com" @click.prevent="doStop">.prevent修饰符-跳转</a>

加了.prevent只会执行doStop 方法弹出弹窗，不会执行href跳转链接，如图下：

三、.once 事件只会触发一次

eg:

        <button @click.once="doOnly">.once修饰符，点击事件只触发一次{{num}}</button>

加了.once修饰符，点击按钮只会执行一次doOnly方法，如下图：

完整例子代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on事件处理指令</title>
</head>
<body><!--v-on 给元素（标签）绑定事件监听器oninput、onclick、onchange、onblur等完整方式`v-on:事件名=“函数/方法”`简写方式`@事件名=“函数/方法”，注意@符号不能加冒号“：”`@input /@click/@change/@blur .....--><div id="app"><!--事件处理方式say未传递参数，则默认会传递DOM原生事件对象--><button v-on:click="say">v-on绑定的时间按钮：{{msg}}</button><!--事件的处理方法say传递了参数，则默认不会传递DOM原生事件对象--><button @click="say(123)">简写@绑定的事件按钮：{{msg}}</button><!--事件的处理方法传递了多个参数，如果需要获取远程DOM事件对象，则必须手动传$event--><button @click="doLog('牛逼',$event)">手动传递DOM事件对象</button><input @blur="doBlur"><!--事件修饰符：.stop 阻止单机事件继续传播 event.stopProgagetion()<div @click="todo"><div @click="doThis"></div></div>.prevent 阻止事件默认行为<a href="**" @click.prevent="**"></a>.once 事件只会触发一次<button @click.once="add">新增+1</button>--><h3>事件修饰符</h3><div @click="todo"><div @click.stop="doThis">单机事件会继续传递</div></div><br><!--默认情况下：会触发点击事件，且会进行页面跳转--><a href="http://www.baidu.com" @click="doStop">默认跳转</a><br><!--.prevent 阻止事件默认行为--><a href="http://www.baidu.com" @click.prevent="doStop">.prevent修饰符-跳转</a><br><button @click="doOnly1">点击事件每次加一{{num1}}</button><br><button @click.once="doOnly">.once修饰符，点击事件只触发一次{{num}}</button></div><script src="./node_modules/vue/dist/vue.global.js"></script><script type="text/javascript">const {createApp} = Vue;const app=createApp({data(){return{msg:"aaa",num:0,num1:0}},//定义方法的选项methods: {say(event){//event 事件对象this.msg="5555"; //this 代表app对象console.log("say something!",event);},//多个必须加逗号doLog(name,event){console.log(name,event);},doBlur(event){console.log('输入框失去焦点',event.target.value); //获取输入框值},doThis(event){console.log("doThis");},todo(event){console.log("todo");},doStop(){alert("doStop!");},doOnly1(){this.num1++;console.log("doOnly1");},doOnly(){this.num++;console.log("doOnly");}}}).mount("#app");console.log("app",app);</script></body>
</html>

相关文章：

v-on/@ 事件处理指令修饰符-stop、prevent、once

v-on/事件修饰符&#xff1a; 一、.stop 阻止单机事件继续传播 event.stopProgagetion() eg: <h3>事件修饰符</h3> <div click"todo"> <div click.stop"doThis"> 单机事件会继续传递 </div> </div> 点击 单机事…...

编程日记 2023/10/12 10:45:27

macOS Sonoma 14.1beta3（23B5067a）发布

黑果魏叔10 月 11 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.1 开发者预览版 Beta 3 更新&#xff08;内部版本号&#xff1a;23B5067a&#xff09;&#xff0c;本次更新距离上次发布隔了 7 天。 根据官方发布的macOS Sonoma 14.1beta3更新日志&#xff0c;此…...

编程日记 2023/10/12 10:44:25

这些负载均衡都解决哪些问题？服务、网关、NGINX？

在微服务项目中&#xff0c;有服务的负载均衡、网关的负载均衡、Nginx的负载均衡&#xff0c;这几个负载均衡分别用来解决什么问题呢&#xff1f; 一、服务的负载均衡 先抛出一个问题&#xff1a; 当一个微服务被多个实例部署时&#xff0c;如何分配和平衡请求的负载&#x…...

编程日记 2023/10/12 10:43:23

#力扣：344. 反转字符串@FDDLC

344. 反转字符串 一、Java class Solution {public void reverseString(char[] s) {for (int l 0, r s.length - 1; l < r; l, r--) {s[l] ^ s[r];s[r] ^ s[l];s[l] ^ s[r];}} } 二、C #include <vector> using namespace std; class Solution { public:void re…...

编程日记 2023/10/12 10:41:21

浅谈SSL通配符证书优势

在当今数字化时代&#xff0c;网络安全是一个日益重要的问题。随着越来越多的网站和应用程序被创建和部署&#xff0c;用户输入的敏感信息面临着潜在的风险。为了确保数据传输的机密性和完整性&#xff0c;SSL&#xff08;Secure Sockets Layer&#xff09;证书成为保护用户隐私…...

编程日记 2023/10/12 10:40:20

[开源]基于流程编排的自动化测试工具，插件驱动，测试无限可能

一、开源项目简介 流程编排&#xff0c;插件驱动&#xff0c;测试无限可能 一款基于流程编排的自动化测试工具 二、开源协议 使用Apache-2.0开源协议 三、界面展示 四、功能概述 在软件开发旅程中&#xff0c;测试流程的管理和执行常常是复杂且耗时的挑战。传统测试工具主…...

编程日记 2023/10/12 10:39:19

gdb的一些常见命令收录

gdb的一些常见命令收录 基本命令设置和查看调试其他 基本命令 run 运行程序。 next (n) 单步调试&#xff08;不进入函数&#xff09;。 step (s) 单步调试&#xff08;进入函数&#xff09;。 continue © 继续执行程序。 quit (q) 退出GDB。 help 获取GDB命令的帮…...

编程日记 2023/10/12 10:38:18

聚观早报 | 首个“5G-A智慧家庭”发布；李鹏称5G-A是5G发展选择

【聚观365】10月12日消息 首个“5G-A智慧家庭”发布 李鹏称5G-A是5G发展的自然选择 新版努比亚Z50S Pro开售 英特尔锐炫A580显卡全球同步上市 vivo X100系列年底登场 首个“5G-A智慧家庭”发布 在全球移动宽带论坛&#xff08;MBBF2023&#xff09;期间&#xff0c;du联合…...

编程日记 2023/10/12 10:37:17

golang JWT原理介绍

JWT认证机制 官方文档 JWT文档 原理简介 客户端通过服务端认证之后&#xff0c;由服务端返回一个JSON对象&#xff0c;发回到客户端。客户端保存该对象用于以后服务器访问凭据&#xff0c;服务端完全依赖该JSON对象来验证客户端的身份。由于JSON数据容易被篡改&#xff0c;…...

编程日记 2023/10/12 10:36:15

xcode打包macos报错：FlutterInputs.xcfilelist 和 FlutterOutputs.xcfilelist

xcode 打包macos的时候&#xff0c;报错如下&#xff1a; Unable to load contents of the file list: ‘macos/ephemeral/FlutterInputs.xcfilelist’ ‘macos/ephemeral/FlutterOutputs.xcfilelist’ 解决方案&#xff1a; 我的项目macos下没有找到FlutterInputs.xcfilelis…...

编程日记 2023/10/12 10:35:14

智能机场系统：打造出行体验的未来

随着航空业的迅猛发展&#xff0c;机场作为出行的重要枢纽&#xff0c;必须不断提升自身的服务质量和效率。智能机场系统应运而生&#xff0c;为旅客提供更加便捷、智能化的出行体验。本文将从技术应用、服务优化和安全保障三个方面&#xff0c;全面介绍智能机场系统的特点和优…...

编程日记 2023/10/12 10:34:13

ROS为机器人装配激光雷达

移动机器人在环境中获取障碍物的具体位置、房间的内部轮廓等信息都是非常必要的&#xff0c;这些信息是机器人创建地图、进行导航的基础数据&#xff0c;除上面所讲的Kinect&#xff0c;还可以使用激光雷达作为这种场景应用下的传感器。 激光雷达可用于测量机器人和其他物体之间…...

编程日记 2023/10/12 10:33:12

ppt录屏没有声音？超实用教程来了！

随着信息技术的发展&#xff0c;ppt已经成为工作中必不可少的工具。无论是工作报告、项目展示还是学术交流&#xff0c;都离不开ppt的辅助。屏幕录制功能是ppt的一个重要特性&#xff0c;可以帮助用户方便地录制幻灯片演示&#xff0c;但在使用过程中&#xff0c;有时会遇到ppt…...

编程日记 2023/10/12 10:32:12

不外传秘诀| docker 快速搭建常用的服务环境

本文主要给大家介绍如何使用 docker 搭建常用的服务环境&#xff0c; 包括mysql,reedis,nginx,jenkins 等常用的环境&#xff0c;下面直接进入主题。 1、MySQL 部署 ①搜索 MySQL 镜像 docker search mysql ②拉取 MySQL 镜像 docker pull mysql:5.7 ③创建容器&#xf…...

编程日记 2023/10/12 10:31:11

OrcaTerm AI

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

编程日记 2023/10/12 10:30:08

为什么我说国内大模型都是渣渣？

先看看我的小破站实现了哪些功能&#xff1f; 2023-10-10 实现图床功能&#xff0c;图床链接。 2023-10-05 实现短视频文&#xff08;本&#xff09;案提取&#xff0c;并与GPT进行交互&#xff0c;暂不开放。至此&#xff0c;从文本到视频&#xff0c;再从视频到文本&#…...

编程日记 2023/10/12 10:29:07

B端产品需求分析的思路和方法 4大方面

需求分析对产品成功和客户满意度至关重要&#xff0c;它帮助团队深入了解用户需求&#xff0c;优化用户体验&#xff0c;减少开发中的需求变更&#xff0c;降低开发风险。如果缺乏产品分析&#xff0c;容易造成产品定位不准确&#xff0c;用户体验不佳&#xff0c;不能满足用户…...

编程日记 2023/10/12 10:28:06

2018架构真题案例（四十九）

某文件采用多级索引结构&#xff0c;磁盘大小4K字节&#xff0c;每个块号4字节&#xff0c;那么二级索引结果时&#xff0c;文件最大。 A、1024 B、1024*1024 C、2048*2048 D、4096*4096 答案&#xff1a;B 霍尔三维结构以时间堆、&#xff08;&#xff09;堆、知识堆组成…...

编程日记 2023/10/12 10:27:03

日常学习收获之----react的ref和wrappedComponentRef的区别

react获取子组件的方式&#xff0c;有ref和wrappedComponentRef。那这两者有什么区别呢&#xff1f; 区别在于是否用了高阶组件&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#…...

编程日记 2023/10/12 10:26:02

LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS

本文是LLM系列文章&#xff0c;针对《LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS》的翻译。 Longlora:长上下文大型语言模型的高效微调 摘要1 引言2 相关工作3 LongLoRA4 实验5 结论 摘要 我们提出了LongLoRA&#xff0c;一种有效的微调方法&…...

编程日记 2023/10/12 10:25:00

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/7/8 23:38:23

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/6 11:27:06

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/7/12 0:04:09

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/7/8 18:04:19

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/6/21 3:16:21

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/7/12 3:14:11

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/11 13:48:47

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2025/7/12 1:31:28

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

编程新知 2025/7/8 5:36:52

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...

编程新知 2025/7/7 23:07:44