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)
}
作者介绍
X
XiaoSong
V1