Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang sifat pengiraan Vue dan senario aplikasinya
Vue ialah rangka kerja JavaScript popular yang membantu pembangun membina antara muka pengguna dinamik dalam aplikasi web. Komponen Vue ialah elemen UI boleh guna semula yang terdiri daripada templat, data dan kaedah, dan sifat yang dikira merupakan elemen penting dalam aplikasi Vue. Artikel ini akan memberikan pengenalan yang mendalam kepada butiran sifat yang dikira Vue, termasuk sintaks dan senario aplikasi biasa mereka.
Definisi sifat yang dikira
Sifat yang dikira ialah objek data dalam aplikasi Vue, yang menyediakan cara yang mudah untuk mengendalikan pengiraan yang kompleks dan operasi logik berdasarkan data. Sifat yang dikira sendiri adalah reaktif; ia secara automatik mengira semula dan mengemas kini apabila data yang berkaitan berubah.
Sintaks sifat yang dikira
Sintaks sifat yang dikira adalah sangat mudah Berikut ialah contoh sintaks asas:
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } } })
Dalam contoh di atas, kami mentakrifkan sifat terkira <.>, ia mendapat nilai reversedMessage
, membalikkannya dan mengembalikannya. Dengan memanggil atribut message
pada contoh Vue, kami mentakrifkan sifat yang dikira dan menentukan sifat data yang bergantung padanya. computed
computed: { filteredList: function() { return this.list.filter(function(item) { return item && item.name && item.name.trim() !== '' }) .sort(function(a, b) { return a.name.toLowerCase() > b.name.toLowerCase() }) } }Dalam contoh di atas, kami menentukan sifat pengiraan bernama
yang akan mengembalikan data filteredList
yang ditapis dan diisih. list
computed: { formattedPrice: function() { return '$' + this.price.toFixed(2) }, formattedDate: function() { return moment(this.date).format('MMMM D, YYYY') } }Dalam contoh di atas, kami telah mentakrifkan dua sifat yang dikira, dipanggil
dan formattedPrice
. Mereka memformat data mata wang dan tarikh masing-masing. formattedDate
computed: { fullName: { get: function() { return this.firstName + ' ' + this.lastName }, set: function(newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }Dalam contoh ini, kami telah mentakrifkan sifat yang dikira bernama
yang mempunyai kaedah pengambil dan penetap. Apabila kami mendapat harta itu, ia menggabungkan fullName
dan firstName
menjadi nama lengkap apabila kami menetapkan harta itu kepada beberapa nilai baharu, ia membahagikan nilai kepada nama pertama dan nama keluarga, dan dikemas kini secara automatik pada lastName
dan firstName
sifat. lastName
Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat pengiraan Vue dan senario aplikasinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!