在 Vue 3.0 中，按键修饰符用于监听键盘事件时，限定事件只在特定按键被按下时触发。按键修饰符是在监听键盘事件时添加到事件处理函数中的特殊标记。

以下是 Vue 3.0 中使用按键修饰符的示例：
<template>
  <div>
    <!-- 监听键盘事件，并使用按键修饰符 -->
    <input @keydown.enter="handleEnterKey" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleEnterKey() {
      console.log('Enter key pressed');
    }
  }
});
</script>

在上述示例中，@keydown.enter 表示监听键盘的 keydown 事件，但仅当按下 Enter 键时触发 handleEnterKey 方法。

Vue 3.0 支持以下常见的按键修饰符：

  •  .enter

  •  .tab

  •  .delete (捕获 "删除" 和 "退格" 键)

  •  .esc

  •  .space

  •  .up

  •  .down

  •  .left

  •  .right


如果你想监听其他键，可以使用键码（keyCode）：
<template>
  <div>
    <!-- 监听键盘事件，并使用键码 -->
    <input @keydown.13="handleEnterKey" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleEnterKey() {
      console.log('Enter key pressed');
    }
  }
});
</script>

在上述示例中，@keydown.13 表示监听键盘的 keydown 事件，但仅当按下键码为 13 的键（Enter 键）时触发 handleEnterKey 方法。

需要注意的是，Vue 3.0 的按键修饰符语法略有不同于 Vue 2.x，它更加直观和语义化。


转载请注明出处：http://www.zyzy.cn/article/detail/552/Vue 3.0