Vueでキーボードの上下キーイベントをバインドする方法

Vue は、ユーザー インターフェイスの構築に特に使用されるオープン ソースの JavaScript フレームワークです。 Vue の本来の設計目的は、フロントエンド ページの開発プロセスを簡素化し、開発効率を向上させることです。 Vue フレームワークでは、「クリック イベント」、「マウス移動イベント」、「キーボード イベント」などのさまざまな JS イベントをバインドする必要があることがよくあります。この記事では、Vue でキーボードの上下キー イベントをバインドする方法を紹介します。

Vue では、v-on ディレクティブ (または @ と省略) を使用して、さまざまな JS イベントをバインドできます。このうち、キーボードイベントは一般に keydown または keyup で表されます。

キーボードの上下のキー イベントをバインドするには、対応する v-on 命令をテンプレートに追加するだけです。簡単な例を次に示します。

<template>
  <div>
    <input v-model="inputVal" v-on:keydown.up="onUp" v-on:keydown.down="onDown">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: ''
    }
  },
  methods: {
    onUp() {
      console.log('Up key pressed');
    },
    onDown() {
      console.log('Down key pressed');
    },
  }
}
</script>

上記のコード例では、input 要素の v-on ディレクティブで .up# を使用しました # # および .down 修飾子は、キーボードの上下のキー イベントをバインドするために使用されます。 v-on ディレクティブの後の文字列はバインドされる JS イベントを表し、修飾子は特定のイベント タイプを表します。ここでの修飾子 .up はキーボードの上キー (つまり、上矢印キー) を表し、.down はキーボードの下キー (つまり、下矢印キー) を表します）。

上記のコードでは、アップキーイベントとダウンキーイベントを処理するために、

onUp と onDown という 2 つのメソッドを定義しました。ユーザーがキーボードの上キーを押すと、onUp メソッドがトリガーされます。ユーザーがキーボードの下キーを押すと、onDown メソッドがトリガーされます。これら 2 つのメソッドのうち、console.log() メソッドを使用して関連するログ情報を出力します。実際のニーズに応じて独自のロジック コードを記述することができます。

修飾子に関しては、Vue の公式ドキュメントで他のオプションがいくつか提供されています:

• .enter: Enter キーをリッスンします;
# .tab
• : Tab キーを監視します。
.delete
• / .del: Delete キーまたは Backspace キーを監視します。
.esc
• : Esc キーを監視します;
.space
• : スペース キーを監視します;
.ctrl
• : Ctrl キーを監視しますkey;
.alt
• : Alt キーを監視します;
.shift
• : Shift キーを監視します。
キーボード イベントのバインディングは実際の開発でよく使用されます。Vue のテンプレート構文と

v-on

ディレクティブに精通していれば、上記の例を理解するのは難しくないはずです。他のキーのイベントをリッスンしたい場合は、必要に応じて Vue が提供する修飾子を使用することもできることに注意してください。

以上がVueでキーボードの上下キーイベントをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。