X

XiaoSong

V1

2023/02/05阅读:24主题:默认主题

事件处理

内联事件处理

用于简单的场景,使用格式: @click='代码逻辑':

<!-- 当点击后数字加1 -->
<div class="btn" @click="num ++">{{ num }}</div>
import {ref} from 'vue'
const num = ref(0)

方法事件处理

由于内联事件处理不够灵活,因此可以接受一个方法名或对某个方法的调用。

<!-- 当点击后数字加1 -->
<div class="btn" @click="print">{{ num }}</div>
const print = (event) => { 
    num.value ++ 
    console.log(event.target)
}

方法事件处理器会自动接收原生 DOM 事件event。在上面的例子中,console.log(event.target)会输出被点击的DOM元素。

在内联处理器中调用方法

内联处理器中除了直接绑定方法名,你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件:

<!-- 输出对应的参数 -->
<div class="btn" @click="mess('xiaomi')">点击</div>
<div class="btn" @click="mess('redmi')">点击</div>
const mess = (mess) => { 
    console.log(mess)
}

在内联事件处理器中访问事件参数

有的时候我们既想获取自己传入的参数也想获取原生的DOM事件,可以向该处理器方法传入一个特殊的 $event 变量,或者使用内联箭头函数:

<div class="btn" @click="mess('xiaomi', $event)">点击</div>
<div class="btn" @click="(event) => mess('redmi', event)">点击</div>
const mess = (mess, event) => { 
    event.preventDefault() // 访问原生的事件
    console.log(mess) 
}

分类:

前端

标签:

Vue.js

作者介绍

X
XiaoSong
V1