vue3 事件處理 @click
一、基本使用
<template>
<!--直接通過(guò)js代碼處理-->
<p @click="counter++">{{"直接使用："+counter}}</p>
<!--函數(shù)分離-->
<p @click="addCounter0">{{"函數(shù)分離："+counter}}</p>
<!--傳入?yún)?shù)-->
<p @click="addCounter1(5)">{{"傳入?yún)?shù)："+counter}}</p>
<!--事件對(duì)象-->
<p @click="addCounter2(6,$event)">{{"事件對(duì)象："+counter}}</p>
<!--多個(gè)函數(shù)-->
<p @click="addCounter0(),addAge()">{{"多個(gè)函數(shù)："+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("事件對(duì)象：",e)
}
function addAge(){
age.value++
}
</script>
傳入多個(gè)函數(shù)，函數(shù)需要帶上括號(hào)()
二、事件修飾
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>
無(wú)stop：會(huì)觸發(fā) btnClick，再觸發(fā)divClick
有stop：只觸發(fā)btnClick
2.2 prevent阻止默認(rèn)行為
<form action="">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
2.3 once只觸發(fā)一次回調(diào)
<button @click.once="btnClick">觸發(fā)一次</button>
三、按鍵修飾
按下對(duì)應(yīng)按鈕，會(huì)觸發(fā)對(duì)應(yīng)事件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-528158.html
<template>
<input type="text" @keyup.enter="btnClick" />
</template>
<script setup>
function btnClick(){
console.log("子btn事件")
}
</script>
常用的按鍵文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-528158.html
| 按鍵 | 解釋 |
|---|---|
| enter | 回車 |
| tab | 切換 |
| delete | 刪除 |
| esc | 退出 |
| space | 空格 |
| up | 向上 |
| down | 向下 |
| left | 向左 |
| right | 向右 |
到了這里，關(guān)于vue3 事件處理 @click的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
