Vue事件修饰符总结

51 阅读1分钟

简介

vue常用的事件修饰符,可提高工作效率。

支持链式写法, 例如: @click.stop.prevent

修饰符语法含义
同步修饰符.sync
事件修饰符
prevent修饰符@submit.prevent阻止默认事件
stop修饰符@click.stop @click.stop.prevent阻止事件冒泡
self修饰符@click.self点击自己才触发
capture修饰符@click.capture先执行父元素的事件,再执行子元素的事件(冒泡是先执行子元素,再执行父元素)
once修饰符@click.once点击事件只会触发一次
键盘事件修饰符
enter修饰符@keyup.enter回车键
delete修饰符@keyup.delete删除键
tab修饰符@keyup.tabtab键
esc修饰符@keyup.escesc键
space修饰符@keyup.space空格键
up、down、left、right@keyup.up鼠标的上下左右键
ctrl修饰符@keyup.ctrl.65="handleEvent"点击ctrl+A键 65是A
shift修饰符@keyup.shift="handleEvent"点击shift键
alt修饰符@keyup.alt="handleEvent"点击alt键
鼠标事件修饰符
left修饰符@click.left点击鼠标左键
contextmenu@contextmenu.prevent鼠标右键
middle修饰符@click.middle鼠标中键
表单修饰符
lazy修饰符<input v-model.lazy="field.title" />懒加载,当光标离开input,才修改数据
number修饰符<input type="number" name="" v-model.number="field.title"即使input是number类型的,得到的数据类型仍然是string类型,此时需要加上.number修饰符就可以得到数字类型
trim修饰符<input type="number" name="" v-model.trim="field.title"去除字符串的左右空格