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重 ...
随机推荐
- Attempt to invoke virtual method 'boolean java.lang.String.equals(java.lang.Object)' on a null objec
遇到这个一场折腾了1个小时, 这是系统在解析XML的时候出错, 最后费了好大的劲才发现 XML文件中,<View> 写成小写的 <view> 了. 崩溃啊.......... ...
- tomcat结合nginx
相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...
- OC-ARC，类扩展，block
总结 标号 主题 内容 一 autorelease autorelease基本概念/自动释放池/autorelease基本使用 二 autorelease注意事项 注意点/应用场景 三 ARC 什么是 ...
- @Value("#{}")与@Value("${}")
开发过程中,有些配置信息是根据环境的不同而有不同的值.这个时候,我们需要获取配置文件中的值或者spring容器中的值,可以通过@value注解获取相关的值. @Value("#{}" ...
- zabbix之被动模式之编译安装proxy
#:准备源码包,编译安装 root@ubuntu:/usr/local/src# ls zabbix-4.0.12.tar.gz root@ubuntu:/usr/local/src# tar xf ...
- 在Eclipse中运行OSGI工程出错的解决方案
今天学习OSGI的过程中按照书上所述搭建好第一个helloworld插件工程,运行的过程中出现下面所示的错误: !SESSION 2014-06-09 21:04:49.038 ----------- ...
- my38_MySQL事务知识点零记
从innodb中查看事务信息 show engine innodb status\G; ------------ TRANSACTIONS------------Trx id counter 3153 ...
- 【C/C++】字符数组：char，char*，char a[]， char *a[]， char **s 的区别与联系/const char*和char*的区别
一.char,char*,char a[], char *a[], char **s 的区别与联系 C语言中的字符串是字符数组,可以像处理普通数组一样处理字符串. 可以理解为在内存中连续存储的字符. ...
- 什么是git？
目录 一.简介 Git与SVN 区别 一.简介 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核 ...
- 让你用Markdown的方式来做PPT
也许你是以为代码高手,Markdown写作高手,但你是PPT高手吗? 你的成绩有没有被PPT高手抢走过呢? 不会作精美PPT是不是很头疼呢? 今天就给大家介绍了一款PPT制作利器:Slidev~ 说S ...