vue手动触发click事件,vue绑定点击事件@click
由于vue是一个双向数据绑定框架，其点击事件与之前常用的有很大不同。下面这篇文章主要介绍VUE3基础学习的点击事件的相关信息，有需要的可以参考一下。
:
目录
1.概述2。点击事件2.1实现数值递减2.2在事件方法中获取事件对象2.3在事件方法中添加参数2.4在参数化事件方法中获取事件对象2.5点击按钮执行多个方法2.6事件冒泡2.7停止冒泡2.8事件捕获2.9事件只执行一次3。概观
1. 概述
古语有云：努力帮助别人解决问题，你的问题就不难解决。
不管怎样，今天我们来说说VUE3的点击事件。
2. click 事件
2.1 实现数字递减
身体
div id=myDiv/div
/body
脚本
Const app=vue.createApp({ //创建一个vue应用程序实例
data() {
返回{
数字：5
}
},
方法：{
decr() {
如果(this.num=0) {
预警(库存为0，不能购买)
返回；
}
this . num-；
},
},
模板：` 1
差异
库存中还剩{{num}}件。
button @ click= decr buy/button br
/div
`
});
const VM=app . mount( # myDiv )；//绑定id为myDiv的元素
在这个例子中，每点击一个按钮，商品库存就会减少1。
2.2 事件方法中获取 event 对象
decr(事件){
console.info(事件)；
console.info(事件.目标)；
如果(this.num=0) {
预警(库存为0，不能购买)
返回；
}
this . num-；
},
您可以在方法中获取事件对象，从中可以获取一些事件信息。
2.3 事件方法中增加参数
方法：{
decr(n) {
如果(this.num 2) {
警报(“库存不足，无法购买”)
返回；
}
this . num-=n；
},
},
模板：` 1
差异
库存中还剩{{num}}件。
Button @click=decr(2)购买2件/buttonbr
/div
`
参数n加到事件decr上，根据参数计算。
2.4 有参事件方法中获取 event 对象
方法：{
decr(n，event) {
console.info(事件)；
console.info(事件.目标)；
如果(this.num 2) {
警报(“库存不足，无法购买”)
返回；
}
this . num-=n；
},
},
模板：` 1
差异
库存中还剩{{num}}件。
Button @click=decr(2，$event)购买2件/buttonbr
/div
`
2.5 点击按钮执行多个方法
方法：{
f1() {
警报( f1 )
},
f2() {
警报( f2 )
},
},
模板：` 1
差异
Button @click=f1()，f2()执行多种方法/buttonbr
/div
`
2.6 事件冒泡
方法：{
clickDiv() {
alert( div )；
},
单击按钮(){
alert(按钮)；
}
},
模板：` 1
div @click=clickDiv
Button @click=clickButton 事件冒泡/buttonbr
/div
`
单击按钮，首先执行按钮上的Click事件，然后执行div上的click事件。
2.7 阻止冒泡
模板：` 1
div @click=clickDiv
Button @click.stop=clickButton 防止事件冒泡/buttonbr
/div
`
如果我们只想在单击按钮时执行按钮的事件，我们可以在按钮上使用@click.stop来防止事件冒泡。
2.8 事件捕获
模板：` 1
div @click.capture=clickDiv
Button @click=clickButton 事件捕获/buttonbr
/div
`
如果您想首先执行div事件，然后执行button事件，那么您可以在div上使用@click.capture来使事件从外向内执行。
2.9 事件只执行一次
模板：` 1
div @click.once=clickDiv
Button @click=clickButton 事件/buttonbr
/div
`
在div上使用@click.once，这样div的事件将只执行一次。
3. 综述
今天说了一下VUE3的点击事件，希望对大家的工作有所帮助。
关于VUE3基础学习的点击事件这篇文章就到这里。更多关于VUE3点击事件的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。