MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. システム修飾子

システム修飾子

Vue.js
2024.05.31

システムキー修飾子は、特定のキー（Shift、Ctrl、Alt、Meta）のイベントを検出するために使用されます。

システムキー修飾子
記法

v-on:イベント.システムキー修飾子=”イベント名”
@イベント.システムキー修飾子=”イベント名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>システムキー修飾子について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <input
        class="key-input"
        v-on:keyup.ctrl="logMessage('Ctrl')"
        placeholder="Ctrlキーを押しながら入力"
      />
      <input
        class="key-input"
        v-on:keyup.shift="logMessage('Shift')"
        placeholder="Shiftキーを押しながら入力"
      />
      <input
        class="key-input"
        v-on:keyup.alt="logMessage('Alt')"
        placeholder="Altキーを押しながら入力"
      />
      <div id="message">{{ message }}</div>
    </div>
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// Vueアプリケーションの作成とマウント
Vue.createApp({
  data() {
    return {
      message: "キーを押してください。",
    };
  },
  methods: {
    logMessage(key) {
      this.message = `${key}キーが押されました！`;
    },
  },
}).mount("#app");
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 50px;
}

.key-input {
  padding: 10px;
  font-size: 16px;
  width: 300px;
}

#message {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}
出力結果
{{ message }}
Vue.js