Bagaimana untuk mengikat papan kekunci ke atas dan ke bawah acara utama dalam vue

Vue ialah rangka kerja JavaScript sumber terbuka yang digunakan khas untuk membina antara muka pengguna. Hasrat reka bentuk asal Vue adalah untuk memudahkan proses pembangunan halaman hadapan dan meningkatkan kecekapan pembangunan. Dalam rangka kerja Vue, kita selalunya perlu mengikat pelbagai acara JS, seperti "acara klik", "acara pergerakan tetikus", "acara papan kekunci", dll. Artikel ini akan memperkenalkan cara mengikat papan kekunci ke atas dan ke bawah acara utama dalam Vue.

Dalam Vue, kita boleh menggunakan arahan v-on (atau disingkat sebagai @) untuk mengikat pelbagai acara JS. Antaranya, acara papan kekunci biasanya diwakili oleh keydown atau keyup.

Untuk mengikat acara utama papan kekunci ke atas dan ke bawah, kami hanya perlu menambahkan arahan v-on yang sepadan pada templat. Berikut ialah contoh mudah:

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

Dalam kod contoh di atas, kami menggunakan pengubah input dan v-on dalam arahan .up elemen .down untuk mengikat papan kekunci dan acara utama turun. Rentetan selepas arahan v-on mewakili acara JS yang akan diikat dan pengubah suai mewakili jenis acara tertentu. Pengubah suai .up di sini mewakili kekunci atas papan kekunci (iaitu, kekunci anak panah ke atas) dan .down mewakili kekunci bawah papan kekunci (iaitu, kekunci anak panah ke bawah).

Dalam kod di atas, kami telah mentakrifkan dua kaedah, onUp dan onDown, untuk mengendalikan acara utama naik dan turun. Apabila pengguna menekan kekunci atas papan kekunci, kaedah onUp akan dicetuskan. Apabila pengguna menekan kekunci bawah papan kekunci, kaedah onDown akan dicetuskan. Antara dua kaedah ini, kami menggunakan kaedah console.log() untuk mengeluarkan maklumat log yang berkaitan Anda boleh menulis kod logik anda sendiri mengikut keperluan sebenar.

Mengenai pengubah suai, dokumentasi Vue rasmi menyediakan beberapa pilihan lain:

• .enter: pantau kekunci Enter
• .tab: pantau kekunci Tab ;
• .delete / .del: pantau kekunci Padam atau Backspace
• .esc: pantau kekunci Esc; kekunci;
• .space: memantau kekunci Ctrl;
• .ctrlAcara papan kekunci mengikat sering digunakan dalam pembangunan sebenar Jika anda biasa dengan sintaks templat Vue dan arahan
, contoh di atas seharusnya tidak sukar difahami. Perlu diingatkan bahawa jika anda ingin mendengar acara kunci lain, anda juga boleh menggunakan pengubah yang disediakan oleh Vue mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk mengikat papan kekunci ke atas dan ke bawah acara utama dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!