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

<script> export default { data() { return { username: "", changes: [] }; }, watch: { username(newVal, oldVal) { if (newVal !== oldVal) { this.changes.push({ before: oldVal, after: newVal }); } } } }; </script>

Salin selepas log masuk

Dalam kod di atas, kami merekodkan setiap nilai kotak input dengan menambah changes baharu tatasusunan. Kami telah mengubah sedikit fungsi watch dalam pilihan handler supaya ia kini akan dicetuskan apabila nilai kotak input berubah. Apabila nilai baharu tidak sama dengan nilai lama, kami menyimpan nilai sebelumnya dan nilai seterusnya dalam bentuk objek dalam tatasusunan changes.

Rekodkan nilai berbilang kotak input

Dalam pembangunan sebenar, kita biasanya perlu memantau nilai berbilang kotak input. Dalam kes ini, kita boleh menggunakan objek dengan format yang sama untuk menyimpan semua perubahan kotak input. Nama atribut dalam objek ialah ID atau nama kotak input, dan nilai atribut ialah objek yang mengandungi nilai sebelum dan selepas kotak input diubah suai.

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

    <label for="email">邮箱:</label>
    <input id="email" v-model="formData.email">
    <p>邮箱: {{ formData.email }}</p>

    <pre v-text="JSON.stringify(changes)">

<script> export default { data() { return { formData: { username: "", email: "" }, changes: {} }; }, watch: { formData: { handler(newVal, oldVal) { // 遍历对象 formData for (const key in newVal) { // 如果 newValue 和 oldValue 不同 if (newVal[key] !== oldVal[key]) { // 新增一个属性，属性名为输入框的名称或 ID if (!this.changes[key]) { this.$set(this.changes, key, {}); } // 设置属性值， 属性值包含 before 和 after 两个字段 this.changes[key].before = oldVal[key]; this.changes[key].after = newVal[key]; } } }, // 深度监听对象中的属性，当数据属性的值发生改变时，handler 中 callBack 函数将被执行。 deep: true } } }; </script>

Salin selepas log masuk