v-on/@ 事件处理指令修饰符-stop、prevent、once
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/事件修饰符： 一、.stop 阻止单机事件继续传播 event.stopProgagetion() eg: <h3>事件修饰符</h3> <div click"todo"> <div click.stop"doThis"> 单机事件会继续传递 </div> </div> 点击 单机事…...
macOS Sonoma 14.1beta3（23B5067a）发布
黑果魏叔10 月 11 日消息，苹果今日向 Mac 电脑用户推送了 macOS 14.1 开发者预览版 Beta 3 更新（内部版本号：23B5067a），本次更新距离上次发布隔了 7 天。 根据官方发布的macOS Sonoma 14.1beta3更新日志，此…...
这些负载均衡都解决哪些问题？服务、网关、NGINX？
在微服务项目中，有服务的负载均衡、网关的负载均衡、Nginx的负载均衡，这几个负载均衡分别用来解决什么问题呢？ 一、服务的负载均衡 先抛出一个问题： 当一个微服务被多个实例部署时，如何分配和平衡请求的负载&#x…...
#力扣：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…...
浅谈SSL通配符证书优势
在当今数字化时代，网络安全是一个日益重要的问题。随着越来越多的网站和应用程序被创建和部署，用户输入的敏感信息面临着潜在的风险。为了确保数据传输的机密性和完整性，SSL（Secure Sockets Layer）证书成为保护用户隐私…...
[开源]基于流程编排的自动化测试工具，插件驱动，测试无限可能
一、开源项目简介 流程编排，插件驱动，测试无限可能 一款基于流程编排的自动化测试工具 二、开源协议 使用Apache-2.0开源协议 三、界面展示 四、功能概述 在软件开发旅程中，测试流程的管理和执行常常是复杂且耗时的挑战。传统测试工具主…...
gdb的一些常见命令收录
gdb的一些常见命令收录 基本命令设置和查看调试其他 基本命令 run 运行程序。 next (n) 单步调试（不进入函数）。 step (s) 单步调试（进入函数）。 continue © 继续执行程序。 quit (q) 退出GDB。 help 获取GDB命令的帮…...
聚观早报 | 首个“5G-A智慧家庭”发布；李鹏称5G-A是5G发展选择
【聚观365】10月12日消息 首个“5G-A智慧家庭”发布 李鹏称5G-A是5G发展的自然选择 新版努比亚Z50S Pro开售 英特尔锐炫A580显卡全球同步上市 vivo X100系列年底登场 首个“5G-A智慧家庭”发布 在全球移动宽带论坛（MBBF2023）期间，du联合…...
golang JWT原理介绍
JWT认证机制 官方文档 JWT文档 原理简介 客户端通过服务端认证之后，由服务端返回一个JSON对象，发回到客户端。客户端保存该对象用于以后服务器访问凭据，服务端完全依赖该JSON对象来验证客户端的身份。由于JSON数据容易被篡改，…...
xcode打包macos报错：FlutterInputs.xcfilelist 和 FlutterOutputs.xcfilelist
xcode 打包macos的时候，报错如下： Unable to load contents of the file list: ‘macos/ephemeral/FlutterInputs.xcfilelist’ ‘macos/ephemeral/FlutterOutputs.xcfilelist’ 解决方案： 我的项目macos下没有找到FlutterInputs.xcfilelis…...
智能机场系统：打造出行体验的未来
随着航空业的迅猛发展，机场作为出行的重要枢纽，必须不断提升自身的服务质量和效率。智能机场系统应运而生，为旅客提供更加便捷、智能化的出行体验。本文将从技术应用、服务优化和安全保障三个方面，全面介绍智能机场系统的特点和优…...
ROS为机器人装配激光雷达
移动机器人在环境中获取障碍物的具体位置、房间的内部轮廓等信息都是非常必要的，这些信息是机器人创建地图、进行导航的基础数据，除上面所讲的Kinect，还可以使用激光雷达作为这种场景应用下的传感器。 激光雷达可用于测量机器人和其他物体之间…...
ppt录屏没有声音？超实用教程来了！
随着信息技术的发展，ppt已经成为工作中必不可少的工具。无论是工作报告、项目展示还是学术交流，都离不开ppt的辅助。屏幕录制功能是ppt的一个重要特性，可以帮助用户方便地录制幻灯片演示，但在使用过程中，有时会遇到ppt…...
不外传秘诀| docker 快速搭建常用的服务环境
本文主要给大家介绍如何使用 docker 搭建常用的服务环境， 包括mysql,reedis,nginx,jenkins 等常用的环境，下面直接进入主题。 1、MySQL 部署 ①搜索 MySQL 镜像 docker search mysql ②拉取 MySQL 镜像 docker pull mysql:5.7 ③创建容器…...
OrcaTerm AI
🙈作者简介：练习时长两年半的Java up主 🙉个人主页：程序员老茶 🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎 📚系列专栏：Java全栈，…...
为什么我说国内大模型都是渣渣？
先看看我的小破站实现了哪些功能？ 2023-10-10 实现图床功能，图床链接。 2023-10-05 实现短视频文（本）案提取，并与GPT进行交互，暂不开放。至此，从文本到视频，再从视频到文本&#…...
B端产品需求分析的思路和方法 4大方面
需求分析对产品成功和客户满意度至关重要，它帮助团队深入了解用户需求，优化用户体验，减少开发中的需求变更，降低开发风险。如果缺乏产品分析，容易造成产品定位不准确，用户体验不佳，不能满足用户…...
2018架构真题案例（四十九）
某文件采用多级索引结构，磁盘大小4K字节，每个块号4字节，那么二级索引结果时，文件最大。 A、1024 B、1024*1024 C、2048*2048 D、4096*4096 答案：B 霍尔三维结构以时间堆、（）堆、知识堆组成…...
日常学习收获之----react的ref和wrappedComponentRef的区别
react获取子组件的方式，有ref和wrappedComponentRef。那这两者有什么区别呢？ 区别在于是否用了高阶组件！！！！！！！！！！！&#…...
LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS
本文是LLM系列文章，针对《LONGLORA: EFFICIENT FINE-TUNING OF LONGCONTEXT LARGE LANGUAGE MODELS》的翻译。 Longlora:长上下文大型语言模型的高效微调 摘要1 引言2 相关工作3 LongLoRA4 实验5 结论 摘要 我们提出了LongLoRA，一种有效的微调方法&…...
Kimi-VL-A3B-Thinking实战教程：Chainlit中集成历史对话与文件上传功能
Kimi-VL-A3B-Thinking实战教程：Chainlit中集成历史对话与文件上传功能 1. 引言：让图文对话模型真正“好用”起来 如果你已经用vllm部署了Kimi-VL-A3B-Thinking这个强大的图文对话模型，并且通过Chainlit搭建了前端界面，那么恭喜你…...
从物流小哥，转行网络安全，是我这辈子最成功的选择
从月薪4000的物流小哥成功转行到月入上万的网络安全工程师，我是怎么做到的，下面说说我的亲身经历。 我叫阿强，我是26岁转行学网安的。说实在，转行就是奔着挣钱去的。我三流大学毕业，物流专业，学习能力一般…...
BCI Competition IV 2a数据集深度解析：脑机接口EEG信号处理实战指南
BCI Competition IV 2a数据集深度解析：脑机接口EEG信号处理实战指南 【免费下载链接】bcidatasetIV2a This is a repository for BCI Competition 2008 dataset IV 2a fixed and optimized for python and numpy. This dataset is related with motor imagery 项目…...
自学渗透测试第八天（网络安全法、伦理规范与工具链联动）
3.2 网络安全法、伦理规范与工具链联动（第8天）核心目标树立法律与道德意识：深入理解《网络安全法》等相关法规的核心要求，明确渗透测试的法律边界和职业伦理，建立红线意识。掌握标准测试流程：将前7天所学的…...
你的微信记忆银行：三分钟学会永久保存珍贵聊天记录
你的微信记忆银行：三分钟学会永久保存珍贵聊天记录 【免费下载链接】WeChatMsg 提取微信聊天记录，将其导出成HTML、Word、CSV文档永久保存，对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMs…...
化疗对女性的杀伤力
化疗人群普遍存在体质虚弱、免疫力下降、食欲差、体力透支、肠胃不适等问题，白之品海参凭借其天然温和的营养特点，能在多个方面提供针对性支持：温和滋补，不刺激肠胃海参性平温和，不燥热、不寒凉，对化疗后敏…...
后端消息投递可靠性：基于 RabbitMQ 的“双重防线-幂等闭环”模式
后端消息投递可靠性：基于 RabbitMQ 的“双重防线-幂等闭环”模式 一、 发送核心：rabbitTemplate.convertAndSend 重载全览 在 RabbitMQ 的“中控-工人”模式中，中控（生产者）发送指令的形式决定了任务的可靠性深度。 1.…...
别墅装修避坑指南：8个容易被忽视但至关重要的技术要点
别墅装修项目复杂，其风险与普通家装不在一个量级。梳理这8个要点，能帮你建立清晰的工程思维，避免在信息不对称中踩坑。1️⃣ 报价单的“参数化”解析别只看总价，要看清单的颗粒度。一份规范的报价应像一份技术参数表，包…...
AI 模型训练中的梯度裁剪技巧
AI模型训练中的梯度裁剪技巧 在深度学习的模型训练过程中，梯度爆炸是一个常见的问题，它会导致模型参数更新过大，进而使训练过程变得不稳定甚至无法收敛。为了解决这一问题，梯度裁剪（Gradient Clipping）技术…...
显卡健康终极诊断：用memtest_vulkan三步检测显存稳定性
显卡健康终极诊断：用memtest_vulkan三步检测显存稳定性 【免费下载链接】memtest_vulkan Vulkan compute tool for testing video memory stability 项目地址: https://gitcode.com/gh_mirrors/me/memtest_vulkan 当你的游戏画面突然出现彩色条纹，…...