摘要

按鍵修飾符是專門用於鍵盤事件的修飾符，如 .enter 和 .esc，讓我們可以指定只有在按下特定按鍵時才觸發事件。

定義與說明

這些修飾符讓我們不必在事件處理函式中編寫 if (event.key === 'Enter') 這類判斷程式碼。Vue 內建了常用按鍵的別名，如 .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right。

實作範例

Vue SFC

<script setup>
function submit() { /* ... */ }
</script>
<template>
  <!-- 只有在按下 Enter 鍵時，才會呼叫 submit 方法 -->
  <input @keyup.enter="submit" placeholder="輸入後按 Enter" />
</template>

結論

按鍵修飾符是處理鍵盤互動的便捷語法糖，它讓模板的語義更清晰，並簡化了我們的 JavaScript 邏輯。

按鍵修飾符 .enter 鍵盤事件