Cara menggunakan v-on:keyup untuk mendengar acara papan kekunci dalam Vue

Dalam Vue, kami boleh menggunakan arahan v-on untuk mengikat pendengar acara, di mana v-on:keyup boleh memantau acara pop timbul kekunci papan kekunci.

Arahan v-on ialah arahan mengikat acara yang disediakan oleh Vue, yang boleh digunakan untuk mendengar acara DOM. Sintaks amnya ialah: v-on: event name="callback function", di mana "event name" merujuk kepada acara standard atau nama acara tersuai yang disokong oleh elemen DOM dan "callback function" dilaksanakan apabila acara itu dicetuskan.

Apabila mendengar acara papan kekunci, kita boleh menggunakan arahan v-on:keyup, yang boleh mencetuskan fungsi panggil balik apabila kekunci papan kekunci muncul. Penggunaan khusus adalah seperti berikut:

<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>

Dalam kod di atas, kami mengikat acara v-on:keyup.enter pada elemen input, yang bermaksud memantau acara papan kekunci masukkan kekunci muncul. Apabila pengguna menekan kekunci enter dalam kotak input dan memaparkannya, Vue akan secara automatik mencetuskan fungsi panggil balik sendMessage dan menghantar kandungan kotak input sebagai parameter.

Selain kekunci enter, kami juga boleh memantau acara pop timbul kekunci papan kekunci lain. Contohnya:

<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>

Dalam kod di atas, kami mengikat acara v-on:keyup.esc pada elemen input, yang bermaksud memantau acara kekunci esc papan kekunci muncul. Apabila pengguna menekan kekunci esc dalam kotak input dan memaparkannya, Vue akan secara automatik mencetuskan fungsi panggil balik cancelMessage, yang mengosongkan kandungan kotak input.

Secara umumnya, sangat mudah untuk menggunakan v-on:keyup untuk memantau acara papan kekunci dalam Vue Anda hanya perlu mengikat acara itu kepada elemen DOM yang perlu dipantau. Pada masa yang sama, Vue juga menyokong pemantauan bentuk acara papan kekunci lain, seperti v-on:keydown dan v-on:keypress. Anda boleh merujuk kepada dokumentasi rasmi untuk digunakan apabila diperlukan.

Atas ialah kandungan terperinci Cara menggunakan v-on:keyup untuk mendengar acara papan kekunci dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!