Vue3 イベント処理 @click
1. 基本的な使い方
<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. イベントの変更
2.1 ストップによりイベントのバブリングを防止
<template>
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</template>
<script setup>
function divClick(){
console.log("父div事件")
}
function btnClick(){
console.log("子btn事件")
}
</script>
停止なし: btnClick をトリガーし、次に
停止付きで divClick をトリガーします: btnClick のみをトリガーします
2.2Prevent はデフォルトの動作を防止します
<form action="">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
2.3 1 回だけコールバックをトリガーします
<button @click.once="btnClick">触发一次</button>
3. ボタンの変更
対応するボタンが押されると、対応するイベントがトリガーされます
<template>
<input type="text" @keyup.enter="btnClick" />
</template>
<script setup>
function btnClick(){
console.log("子btn事件")
}
</script>
よく使用されるキー
| ボタン | 説明 |
|---|---|
| 入力 | キャリッジリターン |
| タブ | 切り替える |
| 消去 | 消去 |
| ESC | やめる |
| 空 | 空 |
| 上 | 上 |
| 下 | 下 |
| 左 | 左 |
| 右 | 右の方へ |