vue3 事件处理 @click
一、基本使用
<template>
<!--直接通过js代码处理-->
<p @click="counter++">{{"直接使用："+counter}}</p>
<!--函数分离-->
<p @click="addCounter0">{{"函数分离："+counter}}</p>
<!--传入参数-->
<p @click="addCounter1(5)">{{"传入参数："+counter}}</p>
<!--事件对象-->
<p @click="addCounter2(6,$event)">{{"事件对象："+counter}}</p>
<!--多个函数-->
<p @click="addCounter0(),addAge()">{{"多个函数："+counter}}--{{age}}</p>
</template>
<script setup>
import { ref, reactive } from 'vue'
const counter=ref(0)
const age=ref(3)
function addCounter0(){
counter.value++
}
function addCounter1(num){
counter.value+=num
}
function addCounter2(num,e){
counter.value+=num
console.log("事件对象：",e)
}
function addAge(){
age.value++
}
</script>
传入多个函数，函数需要带上括号()
二、事件修饰
2.1 stop阻止事件冒泡
<template>
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</template>
<script setup>
function divClick(){
console.log("父div事件")
}
function btnClick(){
console.log("子btn事件")
}
</script>
无stop：会触发 btnClick，再触发divClick
有stop：只触发btnClick
2.2 prevent阻止默认行为
<form action="">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
2.3 once只触发一次回调
<button @click.once="btnClick">触发一次</button>
三、按键修饰
按下对应按钮，会触发对应事件文章来源：https://www.toymoban.com/news/detail-528158.html
<template>
<input type="text" @keyup.enter="btnClick" />
</template>
<script setup>
function btnClick(){
console.log("子btn事件")
}
</script>
常用的按键文章来源地址https://www.toymoban.com/news/detail-528158.html
| 按键 | 解释 |
|---|---|
| enter | 回车 |
| tab | 切换 |
| delete | 删除 |
| esc | 退出 |
| space | 空格 |
| up | 向上 |
| down | 向下 |
| left | 向左 |
| right | 向右 |
到了这里，关于vue3 事件处理 @click的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
