vue3 事件处理 @click
vue3 事件处理 @click。
·
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>
三、按键修饰
按下对应按钮,会触发对应事件
<template>
<input type="text" @keyup.enter="btnClick" />
</template>
<script setup>
function btnClick(){
console.log("子btn事件")
}
</script>
常用的按键
按键 | 解释 |
---|---|
enter | 回车 |
tab | 切换 |
delete | 删除 |
esc | 退出 |
space | 空格 |
up | 向上 |
down | 向下 |
left | 向左 |
right | 向右 |
更多推荐
已为社区贡献2条内容
所有评论(0)