全部学科
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 修饰符确保精确匹配
  • 按键码已废弃,使用语义化别名

📝 发现内容有误?点击此处直接编辑

← 上一篇 事件处理基础
下一篇 → 表单事件处理
想查看更多题目和详细解析?
小程序提供完整的题库、模拟考试和详细解析
马上就来

长按或扫描二维码,立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库