最推荐方式是使用@keyup.up等按键修饰符监听方向键，语义清晰、无需keyCode；局部交互直接绑定元素，全局控制需用window.addEventListener并清除监听，优先使用event.key判断。
Vue 中监听方向键（上、下、左、右）实现移动控制，最推荐的方式是用 @keyup.up 和 @keyup.down 这类按键修饰符，简洁、语义清晰、无需查 keyCode。
直接在输入框或可聚焦元素上绑定
适用于搜索框、表单、弹窗等局部交互场景。按下方向键时触发对应逻辑：
- 用
@keyup.up监听「上箭头」，@keyup.down监听「下箭头」 - 默认只响应 keyup（抬起），避免重复触发；如需按住持续响应，改用
@keydown.up - 事件函数中可执行光标移动、选项高亮、列表滚动等操作
示例：
<input type="text" placeholder="按上下键切换选项" @keyup.up="moveUp" @keyup.down="moveDown" />
对应方法：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
methods: {
moveUp() { console.log('向上移动') },
moveDown() { console.log('向下移动') }
}
全局监听页面级方向键（如画布/相册控制）
当焦点不在输入框，而希望整个页面响应方向键（比如控制图片移动、幻灯片切换），需用 window.addEventListener：
- 在
mounted中添加监听，beforeUnmount中清除，防止内存泄漏 - 用
event.key判断（推荐）或event.code，比 keyCode 更可靠且语义明确 - 注意加
e.preventDefault()防止浏览器默认行为（如页面滚动）
示例：
mounted() {
window.addEventListener('keydown', this.handleDirectionKey)
},
beforeUnmount() {
window.removeEventListener('keydown', this.handleDirectionKey)
},
methods: {
handleDirectionKey(e) {
if (e.key === 'ArrowUp') {
this.movePhoto('up')
} else if (e.key === 'ArrowDown') {
this.movePhoto('down')
}
},
movePhoto(dir) {
// 更新图片的 transform 或 margin 等样式
}
}
组合键与防误触技巧
方向键常配合修饰键使用（如 Ctrl+↑ 调整速度），也需注意实际体验：
- 若需组合键，可写成
@keydown.ctrl.up或在事件函数中判断e.ctrlKey && e.key === 'ArrowUp' - 避免在
contenteditable区域或文本输入中拦截方向键，影响用户正常编辑 - Mac 上 Command 键对应
metaKey，别名.meta可统一处理跨平台快捷键
不建议直接用 keyCode 的原因
虽然 e.keyCode === 38 也能识别上箭头，但：
- keyCode 已被标准废弃，
event.key（值为"ArrowUp"）和event.code（值为"ArrowUp"）才是现代推荐方式 - 别名写法更直观：
.up、.down、.left、.right一目了然 - VUE 自动做了兼容处理，包括 CapsLock、NumLock 等状态影响，不用手动过滤
