Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >input vue mengubah suai nilai sebelum dan selepas
input vue mengubah suai nilai sebelum dan selepas
- WBOYasal
- 2023-05-11 12:35:071250semak imbas
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)">
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)">
Dalam kod di atas, kami mengekalkan nilai berbilang kotak input dengan menambah objek data baharu dalam kaedah formData. Kami juga merekodkan semua perubahan dengan menambah objek changes baharu.
Kami mengubah suai fungsi watch dalam pilihan handler supaya ia kini beralih pada formData objek. Apabila ia mengesan bahawa nilai kotak input telah berubah, ia akan menyemak sama ada objek changes sudah wujud dan menetapkan nilai atribut before dan after. Jika kotak input tidak wujud dalam objek changes, atribut baharu akan ditambah.
Kami juga menetapkan atribut watch pilihan deep kepada true, yang akan memantau secara mendalam sifat objek formData supaya apabila nilai dalam kotak input bersarang dalam formData objek , data juga boleh diperhatikan dengan betul.
Ringkasan
Dalam artikel ini, kami membincangkan cara mengendalikan nilai kotak input yang diubah suai dalam Vue. Kami melihat cara menggunakan watch untuk memantau perubahan pada sifat data dan cara mengelog perubahan pada medan input pada objek. Dalam pembangunan sebenar, teknologi ini sangat berguna dan boleh membantu kami menjejaki semua perubahan dalam bentuk dalam masa nyata.
Atas ialah kandungan terperinci input vue mengubah suai nilai sebelum dan selepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!