VUE中的click事件怎么解析

魁首哥

作者

VUE中的click事件怎么解析

今天就跟大家聊聊有关VUE中的click事件怎么解析，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

1. 概述

老话说的好：努力帮别人解决难题，你的难题也就不难解决了。

言归正传，今天我们来聊聊 VUE3 的 click 事件的相关知识。

2. click 事件

2.1 实现数字递减

<body><divid="myDiv"></div></body><script>constapp=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>`});constvm=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 事件