Vue.js v-on:キーイベントで方向キーの入力イベントを取得する方法

環境
Windows 10 Home 64bit
Vue.js 5.0.8
Google Chrome 108.0.5359.125(Official Build) (64 ビット)
yarn 1.22.19

構文
1.@keyup.up="up"
「up : 上方向キー(↑)」の入力イベントを取得します。

2.@keyup.down="down"
「down下方向キー(↓)」の入力イベントを取得します。

3.@keyup.left="left"
「left : 左方向キー(←)」の入力イベントを取得します。

4.@keyup.right="right"
「right : 右方法キー(→)」の入力イベントを取得します。

使用例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>方向キーの入力を取得するサンプル</title>
  <script src="https://unpkg.com/vue@next"></script>

</head>

<body>
  <div id="app">
   
      <h2>{{val}}</h2>
       <div>
           <input 
            @keyup.up="up" @keyup.down="down"
            @keyup.left="left" @keyup.right="right"
            type="text">  
      </div>

  </div>
  <script>
    const res = {
      data() {
        return {
          val: ''
        }
      },
      methods: {
        up: function () {
          this.val = '方向キーの↑が押されました'          
        },
        down: function () {
          this.val = '方向キーの↓が押されました'          
        },
        left: function () {
          this.val = '方向キーの←が押されました'          
        },
        right: function () {
          this.val = '方向キーの→が押されました'          
        }
      }
    }
    Vue.createApp(res).mount('#app')

  </script>
</body>
</html>

実行結果
テキストフォームに方向キーを入力すると、入力した方向キーを表示します。
例「up : 上方向キー(↑)」を入力すると、「方向キーの↑が押されました」というテキストを表示します。

Vue.js

Posted by arkgame