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重 ...
随机推荐
- 100个Shell脚本——【脚本5】数字求和
[脚本5]数字求和 编写shell脚本,要求输入一个数字,然后计算出从1到输入数字的和,要求,如果输入的数字小于1,则重新输入,直到输入正确的数字为止,示例: 一.脚本 #!/bin/bash whi ...
- js实现点击不同按钮切换内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES在项目中的测试
1.application.yml server: port: ${port:40100}spring: application: name: xc-search-servicexuecheng: e ...
- 用工具堆砌的DevOps 幻觉
作者:顾宇 thoughtworks高级咨询师 在第一届 DevOpsDays结束后,DevOps 运动则如星火燎原之势在全球发展开来.随着 DevOps 思想的不断传播,相对的质疑和批评也从未停止过 ...
- 【论文笔记】Modeling User Exposure in Recommendation
Modeling User Exposure in Recommendation [论文作者]Dawen Liang, David M. Blei, etc. WWW'16 Columbia Univ ...
- [BUUCTF]PWN——jarvisoj_test_your_memory
jarvisoj_test_your_memory 附件 步骤: 例行检查,32位程序,开启了nx保护 试运行一下程序,看看大概的情况 32位ida打开,习惯性的检索程序里的字符串,看到了有关flag ...
- 联盛德 HLK-W806 (九): 软件SPI和硬件SPI驱动ST7789V液晶LCD
目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...
- 工作组规划器（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 好像前面每分配一次任务,都要打开一个对话框,有木有简单粗暴点的法子啊? 必须有啊! 视图里有一种[工作组规划器],想要粗暴 ...
- 七种可能 | Linux丢包故障的定位与解决
出处[云英公众号]:https://mp.weixin.qq.com/s?__biz=MzI1NzM3NTYxMw==&mid=2247483685&idx=1&sn=95c8 ...
- std::function介绍 -转载
类模版std::function是一种通用.多态的函数封装.std::function的实例可以对任何可以调用的目标实体进行存储.复制.和调用操作,这些目标实体包括普通函数.Lambda表达式.函数指 ...