Cara menggunakan arahan v-on untuk mengendalikan acara input borang dalam Vue

Cara mengendalikan acara input borang menggunakan arahan v-on dalam Vue

Vue ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna . Dalam Vue, kita boleh menggunakan arahan v-on untuk memantau peristiwa input borang, seperti klik butang, input papan kekunci, dsb. Artikel ini akan memperkenalkan cara menggunakan arahan v-on untuk mengendalikan acara input borang dalam Vue dan memberikan contoh kod khusus.

1. Mendengar acara klik butang

Pertama, kita akan membincangkan cara menggunakan arahan v-on untuk mendengar acara klik butang. Katakan kita mempunyai butang yang mencetuskan kaedah apabila diklik.

Kod templat HTML adalah seperti berikut:

<div id="app">
  <button v-on:click="handleClick">点击我</button>
</div>

Kod instance Vue adalah seperti berikut:

new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('按钮被点击了！');
    }
  }
});

Dalam kod di atas, kami menggunakan v- pada arahan untuk mengikat Peristiwa klik butang, diikuti dengan nama kaedah yang ingin kita cetuskan.

2. Dengar peristiwa input kotak teks

Seterusnya, kami akan memperkenalkan cara menggunakan arahan v-on untuk mendengar peristiwa input kotak teks . Katakan kita mempunyai kotak teks dan apabila pengguna menaip dalam kotak teks, kaedah dicetuskan.

Kod templat HTML adalah seperti berikut:

<div id="app">
  <input v-on:input="handleChange" type="text" placeholder="请输入内容">
</div>

Kod instance Vue adalah seperti berikut:

new Vue({
  el: '#app',
  methods: {
    handleChange: function(event) {
      console.log(event.target.value);
    }
  }
});

Dalam kod di atas, kami menggunakan v- pada arahan untuk mengikat Peristiwa input kotak teks, diikuti dengan nama kaedah yang ingin kita cetuskan. Dan, dalam kaedah itu kita boleh mendapatkan nilai yang dimasukkan oleh pengguna melalui event.target.value.

3. Dengar acara papan kekunci

Akhir sekali, kami akan memperkenalkan cara menggunakan arahan v-on untuk mendengar acara papan kekunci. Katakan kita mempunyai kotak input, dan apabila pengguna menekan kekunci Enter, kaedah akan dicetuskan.

Kod templat HTML adalah seperti berikut:

<div id="app">
  <input v-on:keyup.enter="handleEnter" type="text" placeholder="按下回车键">
</div>

Kod instance Vue adalah seperti berikut:

new Vue({
  el: '#app',
  methods: {
    handleEnter: function() {
      alert('回车键被按下了！');
    }
  }
});

Dalam kod di atas, kami menggunakan v- pada arahan untuk mengikat acara Kekunci papan kekunci, dan nilai kekunci yang akan dipantau ditentukan sebagai kekunci Enter (kod kekunci ialah 13) melalui pengubah suai .enter. Ini diikuti dengan nama kaedah yang akan dicetuskan.

Ringkasan

Melalui contoh di atas, kami mempelajari cara menggunakan arahan v-on untuk mengendalikan acara input borang dalam Vue. Kita boleh menggunakan v-on:click untuk mendengar acara klik butang, v-on:input untuk mendengar acara input kotak teks, dan v-on:keyup.enter untuk mendengar acara masukkan papan kekunci. Arahan v-on boleh digunakan untuk mengendalikan peristiwa input borang dengan mudah.

Perhatikan bahawa dalam Vue, v-on boleh disingkatkan sebagai @, sebagai contoh, @click mewakili v-on:click, @input mewakili v-on:input, dan @keyup.enter mewakili v -on: keyup.enter. Kita boleh memilih kaedah penulisan yang hendak digunakan berdasarkan keutamaan peribadi.

Saya harap artikel ini dapat membantu anda menggunakan arahan v-on untuk mengendalikan acara input borang dalam Vue. Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej untuk berbincang.

Atas ialah kandungan terperinci Cara menggunakan arahan v-on untuk mengendalikan acara input borang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!