MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. キー修飾子

キー修飾子

Vue.js
2024.05.31

キー修飾子は、特定のキーが押されたときにのみイベントハンドラを実行するために使用します。

キー修飾子
記法

v-on:イベント.キー名=”イベント名”
@イベント.キー名=”イベント名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vueキー修飾子について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <input
        type="text"
        v-on:keyup.enter="submitForm"
        placeholder="Enterキーで送信"
      />
      <input
        type="text"
        v-on:keyup.esc="clearInput"
        placeholder="Escキーでクリア"
      />
    </div>
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// Vueアプリケーションの作成とマウント
Vue.createApp({
  methods: {
    submitForm() {
      alert("フォームが送信されました");
    },
    clearInput(event) {
      event.target.value = "";
    },
  },
}).mount("#app");

input {
  display: block;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
}
出力結果
Vue.js