Penjelasan terperinci tentang sifat pengiraan Vue dan senario aplikasinya-View.js-php.cn

Penjelasan terperinci tentang sifat pengiraan Vue dan senario aplikasinya

WBOY

Lepaskan： 2023-06-09 16:06:36

asal

2511 orang telah melayarinya

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('')
    }
  }
})

Salin selepas log masuk

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

Kelebihan sifat yang dikira

Menggunakan sifat yang dikira mempunyai kelebihan berikut:

Ciri penting bagi sifat yang dikira ialah ia dicache. Jika sifat data yang bergantung pada harta yang dikira tidak berubah, nilai harta yang dikira tidak akan dikira semula. Caching ini boleh meningkatkan prestasi aplikasi Vue dengan banyak.

2. Sifat yang dikira boleh mengurangkan kod dalam templat.

Apabila kami perlu melakukan pengiraan data yang kompleks atau operasi logik, sifat yang dikira membenarkan kami mengabstrakkan operasi ini, menjadikan kod dalam templat lebih ringkas dan mudah difahami.

3. Sifat yang dikira boleh dikongsi dengan sifat terkira yang lain.

Sifat yang dikira boleh bergantung pada sifat terkira lain, yang membolehkan kami membina struktur kod yang lebih fleksibel dan boleh digunakan semula.

Senario aplikasi sifat yang dikira

Berikut ialah beberapa senario aplikasi biasa bagi sifat yang dikira Vue:

1 Penapisan dan pengisihan

Kita boleh menggunakan pengiraan sifat untuk menapis dan mengisih data senarai. Sebagai contoh, kita boleh menentukan sifat yang dikira yang akan menapis semua data kosong atau tidak diingini.

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()
    })
  }
}

Salin selepas log masuk

Dalam contoh di atas, kami menentukan sifat pengiraan bernama

yang akan mengembalikan data filteredList yang ditapis dan diisih. list

2. Memformat data

Kami boleh menggunakan sifat yang dikira untuk memformat data, seperti memformat mata wang, tarikh dan masa, dsb. Ia kelihatan seperti ini:

computed: {
  formattedPrice: function() {
    return '$' + this.price.toFixed(2)
  },
  
  formattedDate: function() {
    return moment(this.date).format('MMMM D, YYYY')
  }
}

Salin selepas log masuk

Dalam contoh di atas, kami telah mentakrifkan dua sifat yang dikira, dipanggil

dan formattedPrice. Mereka memformat data mata wang dan tarikh masing-masing. formattedDate

3. Pengambil dan penetap bagi sifat yang dikira

Kita boleh menggunakan kaedah pengambil dan penetap bagi sifat yang dikira untuk mencapai pengiraan harta yang lebih fleksibel. Sebagai contoh, kita boleh mentakrifkan harta yang dikira yang akan mengemas kini data yang berkaitan secara automatik apabila kita memberikan nilai kepadanya. Seperti yang ditunjukkan di bawah:

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]
    }
  }
}

Salin selepas log masuk

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

Kesimpulan

Sifat pengiraan Vue ialah elemen yang sangat berguna dalam aplikasi Vue yang boleh membantu kami memudahkan pemprosesan data dan operasi logik. Mereka boleh meningkatkan kebolehbacaan dan kebolehgunaan kod kami. Apabila membangunkan aplikasi Vue, kita harus cuba menggunakan sifat yang dikira untuk memudahkan manipulasi data.

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!