Cara menggunakan v-on:input untuk memantau peristiwa input kotak input dalam Vue

Vue ialah rangka kerja JavaScript popular yang menjadikan pembangunan web lebih cekap dan mudah. Antaranya, menggunakan v-on:input untuk memantau peristiwa input kotak input adalah keperluan biasa Artikel ini akan memperkenalkan secara terperinci cara menggunakan v-on:input untuk memantau peristiwa input kotak input dalam Vue.

1. Perintah v-on:input

Perintah v-on:input ialah perintah dalam Vue yang digunakan untuk memantau peristiwa input dalam kotak input. contenteditable dan elemen input lain untuk dicapai.

Menggunakan arahan v-on:input adalah sangat mudah Anda hanya perlu mengikat atribut v-on:input kepada elemen yang perlu dipantau, dan kemudian tentukan kaedah yang sepadan dalam contoh Vue.

Sebagai contoh, dalam kod di bawah, kami mentakrifkan kotak input dan elemen div yang memaparkan kandungan input. Gunakan arahan v-on:input pada elemen input untuk mengikat kaedah yang akan dipanggil apabila kandungan dimasukkan dalam kotak input dan kemas kini kandungan input kepada pembolehubah mesej dalam data. Dalam elemen div, kami menggunakan interpolasi {{}} untuk memaparkan pembolehubah mesej dalam data.

<div id="app">
  <input v-on:input="updateMessage">
  <div>{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    },
    methods: {
      updateMessage: function (event) {
        this.message = event.target.value
      }
    }
  })
</script>

2. Gunakan arahan v-model untuk memudahkan kod

Walaupun arahan v-on:input boleh digunakan untuk memantau peristiwa input dalam kotak input, dalam pembangunan sebenar, kami biasanya menggunakan arahan v-model untuk memudahkan kod.

Arahan v-model adalah bersamaan dengan mengikat arahan v-on:input dan atribut nilai pada masa yang sama. Oleh itu, kita boleh melaksanakan kod contoh di atas dengan menggunakan arahan model-v pada elemen input.

<div id="app">
  <input v-model="message">
  <div>{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

Selepas menggunakan arahan v-model, anda tidak perlu lagi menentukan kaedah updateMessage dalam kaedah untuk mengemas kini data secara automatik Vue akan mengemas kini nilai dalam kotak input kepada pembolehubah mesej dalam data.

3. Pantau acara input lain

Selain acara input, Vue juga menyediakan acara input lain untuk dipantau, seperti penukaran, keyup, keydown, dsb. Kita boleh menghantar nama acara yang sepadan apabila menggunakan arahan v-on:input untuk menentukan acara yang akan dipantau.

Sebagai contoh, dalam kod berikut, kami mendengar peristiwa perubahan elemen textarea dan peristiwa itu akan dicetuskan apabila pengguna melengkapkan input dan meninggalkan elemen. Dalam kaedah contoh Vue, kami menentukan sama ada kandungan yang dimasukkan oleh pengguna memenuhi keperluan kami berdasarkan nilai yang diwakili oleh event.target.value.

<div id="app">
  <textarea v-on:change="checkInput"></textarea>
</div>

<script>
  var app = new Vue({
    el: '#app',
    methods: {
      checkInput: function (event) {
        if (event.target.value === '') {
          alert('输入内容不能为空！')
        } else {
          alert('输入内容为：' + event.target.value)
        }
      }
    }
  })
</script>

4. Ringkasan

Menggunakan arahan v-on:input dalam Vue dengan mudah boleh melaksanakan fungsi memantau peristiwa input dalam kotak input arahan v-model untuk memudahkan kod. Selain acara input, Vue juga menyediakan pelbagai acara input untuk memantau input pengguna, yang boleh dipilih mengikut keperluan khusus. Setelah anda menguasai kemahiran ini, saya percaya anda akan dapat menyelesaikan kerja pembangunan Vue dengan lebih cekap.

Atas ialah kandungan terperinci Cara menggunakan v-on:input untuk memantau peristiwa input kotak input dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!