VUE3 之 click 事件
1. 概述
老话说的好：努力帮别人解决难题，你的难题也就不难解决了。
言归正传，今天我们来聊聊 VUE3 的 click 事件的相关知识。
2. click 事件
2.1 实现数字递减
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
num : 5
}
},
methods : {
decr() {
if(this.num <= 0) {
alert("库存为0，无法购买")
return;
}
this.num-- ;
},
},
template : `
<div>
商品库存剩余 {{num}} 件
<button @click="decr">购买</button><br>
</div>
`
}); const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
该例中，每点一次按钮，商品库存都会减 1
2.2 事件方法中获取 event 对象
decr(event) {
console.info(event);
console.info(event.target);
if(this.num <= 0) {
alert("库存为0，无法购买")
return;
}
this.num-- ;
},
方法中可以获取 event 对象，从中可以获取一些事件信息
2.3 事件方法中增加参数
methods : {
decr(n) {
if(this.num < 2) {
alert("库存不足，无法购买")
return;
}
this.num -= n;
},
},
template : `
<div>
商品库存剩余 {{num}} 件
<button @click="decr(2)">购买2件</button><br>
</div>
`
事件方法 decr 中增加了参数 n，依据参数进行计算
2.4 有参事件方法中获取 event 对象
methods : {
decr(n, event) {
console.info(event);
console.info(event.target);
if(this.num < 2) {
alert("库存不足，无法购买")
return;
}
this.num -= n;
},
},
template : `
<div>
商品库存剩余 {{num}} 件
<button @click="decr(2, $event)">购买2件</button><br>
</div>
`
2.5 点击按钮执行多个方法
methods : {
f1() {
alert("f1")
},
f2() {
alert("f2")
},
},
template : `
<div>
<button @click="f1(), f2()">执行多个方法</button><br>
</div>
`
2.6 事件冒泡
methods : {
clickDiv() {
alert("div");
},
clickButton() {
alert("button");
}
},
template : `
<div @click="clickDiv">
<button @click="clickButton">事件冒泡</button><br>
</div>
`
点击按钮，会先执行 button 上的 click 事件，然后执行 div 上的 click 事件
2.7 阻止冒泡
template : `
<div @click="clickDiv">
<button @click.stop="clickButton">阻止事件冒泡</button><br>
</div>
`
如果我们希望点击按钮时只执行按钮的事件，可以在按钮上使用 @click.stop 的写法阻止事件冒泡。
2.8 事件捕获
template : `
<div @click.capture="clickDiv">
<button @click="clickButton">事件捕获</button><br>
</div>
`
如果希望先执行 div 事件，再执行 button 的事件，可以在 div 上使用 @click.capture 的写法，让事件由外向内执行
2.9 事件只执行一次
template : `
<div @click.once="clickDiv">
<button @click="clickButton">事件</button><br>
</div>
`
在 div 上使用 @click.once ，这样 div 的事件，只会被执行一次
3. 综述
今天聊了一下 VUE3 的 click 事件，希望可以对大家的工作有所帮助
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
4. 个人公众号
追风人聊Java，欢迎大家关注
VUE3 之 click 事件的更多相关文章
- 移动开发那些坑之——safari mobile click事件的冒泡bug
今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...
- js动态绑定click事件时function传参问题
今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...
- jquery 自定义click事件执行多次
用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...
- 关于a标签自身的click事件所带来的一些影响
众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...
- 关于IOS浏览器：document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- JavaScript区分click事件和mousedown（mouseup、mousemove）方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- 移动端的传统click事件延迟和点透现象
一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...
随机推荐
- Logback设置保留日志文件个数
Logback日志文件占用存储空间太多,设置保留文件个数,清理之前的文件. 主要由如下三个参数配合使用 maxHistory ,可选节点,控制保留的归档文件的最大数量,超出数量就删除旧文件,,例如设置 ...
- ython学习笔记（接口自动化框架 V2.0）
这个是根据上次框架版本进行的优化 用python获取excel文件中测试用例数据 通过requets测试接口.并使用正则表达式验证响应信息内容 生成xml文件测试报告 版本更新内容: 1. 整理了Cr ...
- vue2 中的 export import
vue中组件的引用嵌套通过export import语法链接 Nodejs中的 export import P1.js export default { name: 'P1' } index.js i ...
- SQL优化原理
SQL优化过程: 1,捕获高负荷的SQL语句-->2得到SQL语句的执行计划和统计信息--->3分析SQL语句的执行计划和统计信息--->4采取措施,对SQL语句进行调整.1找出高负 ...
- 一个统计 CPU 内存 硬盘 使用率的shell脚本
一个统计 CPU 内存 硬盘 使用率的shell脚本,供大家学习参考 #!/bin/bash #This script is use for describle CPU Hard Memery Uti ...
- 【C/C++】例题 4-2 刽子手游戏/算法竞赛入门经典/函数和递归
[题目] 猜单词游戏. 计算机想一个单词让你猜,你每次猜一个字母. 如果单词里有那个[字母],[所有该字母会显示出来]. 如果没有那个字母,算猜错一次.[最多只能猜错六次] 猜一个已经猜过的字母也算错 ...
- [BUUCTF]PWN——ez_pz_hackover_2016
ez_pz_hackover_2016 题目附件 解题步骤: 例行检查,32位,开启了RELRO保护,二进制的保护机制看这里 由于没有开启nx保护,对于这题一开始想到的是利用写入shellcode来获 ...
- SpringSecurity自定义注解和处理器
登录功能 添加一个配置类 @Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Reso ...
- AT2642 [ARC076A] Reconciled? 题解
Content 有 \(n\) 只狗和 \(m\) 只猴,现在要把这 \(n+m\) 只动物排成一排,要求相邻两只动物不能同时是狗或者同时是猴.求排列方案总数对 \(10^9+7\) 取模后的值. 数 ...
- Hystrix 监控可视化页面——Dashboard 流监控
1.什么是Dashboard Hystrix-dashboard 是一款针对 Hystrix 进行实时监控的工具页面,通过 Hystrix Dashboard 我们可以在直观地看到各 Hystrix ...