Phenquestions
Properti Computed biasanya digunakan untuk menghitung data dari beberapa data lain. Ia dikenal karena reaktivitasnya karena setiap kali variabel yang terlibat dalam beberapa properti yang dihitung diubah, seluruh properti akan dihitung ulang.Posting ini akan belajar untuk meneruskan parameter ke properti yang dihitung dan melihat cara menggunakan Vue dihitung dengan parameter. Sebelum memulai dengan meneruskan parameter ke properti yang dihitung, pertama-tama mari kita pahami properti yang dihitung dengan melalui contoh.
Contoh
Misalkan kita memiliki dua variabel bernama “firstName” dan “lastName” di komponen Vue kita:
//…data()
kembali
nama depan: "",
nama keluarga: ""
,
//…
Properti Terhitung
Kami ingin menghitung properti "fullName" yang akan menggabungkan "firstName" dan "lastName" dan menghitung ulang fullName setiap kali salah satu dari dua variabel "firstName" dan "lastName" diubah. Jadi, properti yang dihitung untuk menghitung nama lengkap akan menjadi seperti ini:
//…dihitung:
nama lengkap()
kembalikan ini.nama depan + " + ini.nama keluarga;
//…
Sekarang mari kita buat beberapa field input dan ikat variabel "firstName" dan "lastName" ke kolom input dan juga ikat properti "fullName" di tag 'p' untuk melihat perubahan instan pada perubahan anime pertama dari yang terakhir nama. Bagian HTML dari komponen ini akan seperti ini:
Baik! Setelah semua pengaturan ini, mari kita lihat halaman web kami.
Jika Anda telah berhasil menulis kode yang benar dan menjalankannya, Anda juga harus memiliki dua kolom input di halaman web Anda. Mari kita coba ketikkan nama depan dan nama belakang dan lihat apakah properti "fulName" akan dihitung atau tidak.
Di sini, di tangkapan layar yang diberikan di atas, Anda dapat menyaksikan reaktivitas luar biasa dari Vue.js menggunakan properti yang dihitung. Anda juga dapat menyaksikan bahwa itu tidak seperti menonton satu variabel dan mengubah nilai beberapa variabel lain. Tetap saja, ia mengawasi setiap variabel yang termasuk dalam properti yang dihitung dan menghitung ulang "nama belakang". Mari kita lihat bagaimana kita dapat meneruskan parameter ke properti yang dihitung dan menggunakannya.
Lewati parameter ke Computed Property
Untuk meneruskan parameter ke properti yang dihitung, kami hanya meneruskan parameter seperti yang kami lakukan untuk fungsi. Misalnya, dalam template, ketika kita telah mengikat variabel “lastName”, kita ingin melewatkan beberapa string, sehingga bagian template dari komponen kita akan menjadi seperti ini:
Sekarang, di properti yang dihitung, parameter yang diteruskan dapat digunakan menggunakan sintaks berikut:.
dihitung:nama lengkap()
kembalikan pesan1 =>
kembali '$pesan $ini.namadepan $ini.nama keluarga'
Ini adalah bagaimana kita dapat meneruskan parameter ke yang dihitung dan mendapatkannya di properti dan menggunakannya.
Jika kami melihat lagi halaman web kami dan mengetikkan Nama depan dan nama belakang, Anda dapat memiliki fungsi dan reaktivitas yang sama, tetapi kali ini, parameternya lewat.
Ini adalah betapa sederhana dan mudahnya melewatkan parameter properti yang dihitung dan menggunakannya use.
Kesimpulan:
Properti yang dihitung adalah fitur yang sangat kuat dari Vue.js, dan kami telah belajar bahwa itu berguna ketika kami harus mengubahnya ketika dependensinya berubah. Kami telah belajar untuk meneruskan parameter dan menggunakannya di properti yang dihitung.
