全部学科
Python全栈
python
NodeJS全栈
nodejs
📅 2026-05-20 5 分钟 ✍️ juanwangdev

按键修饰符

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 修饰符确保精确匹配
  • 按键码已废弃,使用语义化别名
想在手机上练习这篇文章的配套题目?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码
← 上一篇 事件修饰符
下一篇 → 表单输入绑定
扫码体验小程序
加载中
想在手机上刷题学习?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码