简介
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.tab | tab键 |
esc修饰符 | @keyup.esc | esc键 |
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" | 去除字符串的左右空格 |