computed properties di vue
By Auliya 13 views 2 years ago
Computed properties dalam Vue.js adalah properti yang dihasilkan secara dinamis berdasarkan data lain dalam Vue instance atau komponen. Mereka berguna ketika Anda ingin menghitung nilai berdasarkan data yang ada dan ingin memperbarui nilainya secara otomatis ketika data tersebut berubah.
Untuk mendefinisikan computed properties dalam Vue.js, Anda dapat menggunakan properti computed dalam objek opsi Vue instance atau komponen. Berikut adalah contoh penggunaan computed properties dalam Vue instance:
javascript
Copy code
var vm = new Vue({
data: {
panjang: 10,
lebar: 5
},
computed: {
luas: function() {
return this.panjang * this.lebar;
},
keliling: function() {
return 2 * (this.panjang + this.lebar);
}
}
});
Dalam contoh di atas, kami memiliki dua data yaitu panjang dan lebar. Kami kemudian mendefinisikan dua computed properties: luas dan keliling. Kedua computed properties tersebut akan menghasilkan nilai yang dihitung berdasarkan data yang ada.
Dalam template, Anda dapat menggunakan computed properties seperti menggunakan properti biasa. Misalnya:
html
Copy code
<p>Luas: {{ luas }}</p>
<p>Keliling: {{ keliling }}</p>
Dalam contoh di atas, {{ luas }} dan {{ keliling }} akan menampilkan hasil perhitungan yang dihasilkan dari computed properties.
Salah satu keunggulan dari computed properties adalah mereka akan di-cache dan hanya dihitung ulang jika salah satu data yang digunakan berubah. Ini membantu menghindari penghitungan berulang yang tidak perlu dan meningkatkan kinerja aplikasi.
Anda juga dapat menggunakan computed properties dalam komponen Vue. Caranya mirip dengan penggunaan dalam Vue instance. Anda cukup menambahkan blok computed dalam objek opsi komponen tersebut.
Dengan menggunakan computed properties, Anda dapat menghitung dan mengelola data yang tergantung satu sama lain dengan mudah dan efisien dalam aplikasi Vue.js Anda.