v-on:keyup を使用して Vue でキーボード イベントをリッスンする方法

Vue では、v-on ディレクティブを使用してイベント リスナーをバインドでき、v-on:keyup でキーボード キーのポップアップ イベントを監視できます。

v-on ディレクティブは、Vue によって提供されるイベント バインディング ディレクティブであり、DOM イベントをリッスンするために使用できます。その一般的な構文は次のとおりです。 v-on: イベント名="コールバック関数"。ここで、「イベント名」は DOM 要素でサポートされる標準イベントまたはカスタム イベント名を指し、「コールバック関数」はイベントが発生したときに実行されます。トリガーされた関数。

キーボード イベントをリッスンするときは、v-on:keyup 命令を使用できます。これにより、キーボード キーがポップアップしたときにコールバック関数をトリガーできます。具体的な使用法は次のとおりです。

<template>
  <div>
    <input v-model="message" v-on:keyup.enter="sendMessage">
    <!-- keyCode为13表示enter键 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      console.log('message:', this.message)
    }
  }
}
</script>

上記のコードでは、v-on:keyup.enter イベントを input 要素にバインドします。これは、キーボードの Enter キーがポップアップするイベントを監視することを意味します。ユーザーが入力ボックスで Enter キーを押して入力ボックスをポップアップすると、Vue は自動的にコールバック関数 sendMessage をトリガーし、入力ボックスの内容をパラメーターとして渡します。

Enter キーに加えて、他のキーボード キーのポップアップ イベントも監視できます。例:

<template>
  <div>
    <input v-model="message" v-on:keyup.esc="cancelMessage">
    <!-- keyCode为27表示esc键 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    cancelMessage() {
      this.message = ''
    }
  }
}
</script>

上記のコードでは、v-on:keyup.esc イベントを input 要素にバインドします。これは、キーボードの Esc キーがポップアップするイベントを監視することを意味します。ユーザーが入力ボックスで Esc キーを押して入力ボックスをポップアップすると、Vue は自動的にコールバック関数 cancelMessage をトリガーし、入力ボックスの内容をクリアします。

一般に、Vue でキーボード イベントを監視するには v-on:keyup を使用すると非常に便利です。監視する必要がある DOM 要素にイベントをバインドするだけです。同時に、Vue は、v-on:keydown や v-on:keypress など、他の形式のキーボード イベントの監視もサポートします。必要に応じて公式ドキュメントを参照して使用できます。

以上がv-on:keyup を使用して Vue でキーボード イベントをリッスンする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。