Vue 3 按键修饰符

推荐教程

破解合集
Weblog 前后端分离博客
犬小哈的实战专栏

一则或许对你有用的小广告

欢迎加入小哈的星球，你将获得：专属的实战项目（4个项目都能学） / 1v1 提问 / 简历修改 / Java 学习路线 / 社群讨论 / 学习打卡 / 每月赠书

  • 《Spring AI 项目实战（问答机器人、RAG 智能客服、联网搜索）》已完结，基于 Spring AI + Spring Boot 3.x + JDK 21...，查看介绍

  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，查看介绍；演示链接：http://116.62.199.48:7070/

  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接：http://116.62.199.48/

  • 新开坑项目：《从零手撸：秒杀系统高并发优化实战》 正在更新中...，查看介绍

截止目前，星球内专栏累计输出 150w+ 字，讲解图 5110+ 张，还在持续爆肝中.. 后续还会上新更多项目，已有 4700+ 小伙伴加入学习，欢迎点击围观

在 Vue 3 中，你可以使用按键修饰符来监听键盘事件，并执行相应的事件处理函数。按键修饰符可以帮助你更精确地控制用户与你的应用程序的交互。

以下是一些常用的按键修饰符和它们对应的功能：

按键修饰符 功能
.enter 回车键
.tab Tab 键
.delete 删除键或退格键
.esc Escape 键
.space 空格键
.up 上箭头键
.down 下箭头键
.left 左箭头键
.right 右箭头键
.ctrl Control 键
.alt Alt 键
.shift Shift 键
.meta Meta/Command/Windows 键（通常是 Command 键在 macOS 上，Windows 键在 Windows 上）
.exact 精确匹配修饰符，确保修饰符和按键完全匹配

这些修饰符可以与 @keyup 或 @keydown 等事件监听器一起使用，以监听特定键盘事件，并执行相应的操作。

以下是一段示例代码，当用户按下回车键时，触发一个事件处理函数：

<template>
  <input @keyup.enter="handleEnterKey"/>
  <p>{{ message }}</p>
</template>

<script setup>
  import { ref } from 'vue';

  const message = ref('')

  // 回车键对应事件
  const handleEnterKey = () => {
    message.value = '您按了回车键了'
  }

</script>

在上面的示例中，我们使用 @keyup.enter 修饰符监听了回车键的事件，当用户在输入框中按下回车键时，handleEnterKey 方法将会被触发，从而改变页面上的消息。这是一个简单的示例，展示了如何使用按键修饰符 enter 来监听回车键的事件，效果图如下：

监听回车键
监听回车键