按键修饰符
Vue 允许在监听键盘事件时添加按键修饰符。
基本按键
HTML
<input @keyup.enter="submit" />
常用按键别名:
.enter.tab.delete(捕获 Delete 和 Backspace).esc.space.up、.down、.left、.right
系统修饰键
HTML
<!-- Alt + Enter -->
<input @keyup.alt.enter="submit" />
<!-- Ctrl + Click -->
<button @click.ctrl="doSomething">点击</button>
系统修饰键:
.ctrl.alt.shift.meta(Mac 为 Cmd,Windows 为 Win)
精确匹配
HTML
<!-- 仅当 key 是 Enter 时触发,不含修饰键 -->
<input @keyup.enter.exact="handleEnter" />
按键码(不推荐)
HTML
<!-- Vue 2 支持,Vue 3 已移除 -->
<input @keyup.13="submit" />
推荐使用按键别名而非按键码,按键码已被废弃。
要点总结
- 按键修饰符用于
@keydown和@keyup事件 - 支持常用按键别名和系统修饰键
.exact修饰符确保精确匹配- 按键码已废弃,使用语义化别名
📝 发现内容有误?点击此处直接编辑