简介
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" | 去除字符串的左右空格 |