input vue mengubah suai nilai sebelum dan selepas

Vue ialah rangka kerja JavaScript popular yang memudahkan untuk membuat komponen responsif. Dalam pembangunan WEB, kotak input dalam komponen adalah salah satu elemen yang paling biasa. Dalam banyak senario, pembangun perlu menjejaki nilai kotak input dan memprosesnya. Dalam artikel ini, kita akan membincangkan cara mengendalikan nilai kotak input yang diubah suai dalam Vue.

Mendengar kotak input

Vue menyediakan pelbagai cara untuk memantau nilai kotak input. Cara yang paling biasa ialah menggunakan v-model . Arahan v-model melaksanakan pengikatan dua hala, yang bermaksud bahawa pengubahsuaian pada kotak input akan ditunjukkan dalam atribut data dalam contoh komponen, dan apabila nilai atribut data berubah, nilai yang sepadan dalam kotak input akan menjadi dikemas kini secara automatik.

Berikut ialah contoh mudah yang menunjukkan cara menggunakan v-model untuk memantau nilai kotak input teks:

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

Dalam contoh di atas, kami menggunakan v-model untuk mengikat Kotak input teks dan mengekalkan atribut data username dalam contoh komponen. Apabila pengguna memasukkan nilai dalam kotak input, atribut data username akan dikemas kini secara automatik dan ungkapan perbezaan {{ username }} dalam templat juga akan dikemas kini dengan sewajarnya.

Rekod nilai kotak input sebelum dan selepas pengubahsuaian

Dalam sesetengah senario, kita perlu mengetahui nilai kotak input sebelum dan selepas pengubahsuaian. Contohnya, dalam bentuk, kami mahu dapat menjejaki perubahan yang dibuat oleh pengguna dan menyimpan perubahan ini pada tatasusunan changes untuk kegunaan seterusnya.

Dalam Vue, kami boleh menggunakan watch untuk memantau perubahan dalam atribut data. Apabila nilai atribut data berubah, kita boleh menggunakan fungsi handler untuk melaksanakan beberapa operasi.

Kami boleh menggunakan kod berikut untuk merekodkan nilai diubah suai bagi satu kotak input:

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
    <pre v-text="JSON.stringify(changes)">