Cari jumlah dalam vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina aplikasi web moden. Vue menyediakan banyak ciri berguna, salah satunya ialah kemudahan bekerja dengan data menggunakan Vue. Dalam artikel ini, kami akan meneroka cara mencari jumlah dalam Vue.

Vue menyediakan cara yang mudah dan pantas untuk memodelkan data. Untuk melakukan penjumlahan dalam Vue kita perlu menggunakan harta yang dikira. Sifat yang dikira ialah konsep penting dalam Vue, yang menyediakan cara untuk mengira sifat secara dinamik yang boleh dikemas kini secara automatik berdasarkan nilai sifat lain. Sifat yang dikira boleh melakukan pengiraan dan operasi yang kompleks pada data dan mendedahkan keputusannya kepada templat.

Pertama, kita perlu mencipta tika Vue dan menentukan tatasusunan dalam objek datanya. Tatasusunan mengandungi nombor yang ingin kita jumlahkan. Contohnya:

new Vue({
  el: '#app',
  data: {
    numbers: [1, 2, 3, 4, 5]
  }
});

Kami akan menggunakan sifat yang dikira untuk mengira jumlah nombor ini. Sifat yang dikira ialah fungsi yang ditakrifkan pada kejadian Vue, yang boleh kita tentukan melalui pilihan computed. Sifat yang dikira ini akan menerima tatasusunan kami sebagai hujah dan mengembalikan jumlah nombor ini. Contohnya:

new Vue({
  el: '#app',
  data: {
    numbers: [1, 2, 3, 4, 5]
  },
  computed: {
    total: function() {
      return this.numbers.reduce(function(sum, number) {
        return sum + number;
      }, 0);
    }
  }
});

Dalam sifat terkira ini, kami menggunakan kaedah reduce() tatasusunan untuk mengira jumlah. Kaedah reduce() menerima dua parameter: fungsi panggil balik dan nilai awal. Fungsi panggil balik akan dipanggil sekali untuk setiap elemen dalam tatasusunan, dan fungsi menerima dua parameter: nilai sebelumnya dan nilai semasa. Dalam fungsi panggil balik kami, kami menetapkan nilai awal kepada 0 dan kemudian menambah setiap elemen kepada jumlah.

Kini kami boleh menggunakan harta terkira ini dalam templat kami untuk memaparkan jumlah nombor. Contohnya:

<div id="app">
  <ul>
    <li v-for="number in numbers">{{ number }}</li>
  </ul>
  <p>Total: {{ total }}</p>
</div>

Dalam templat ini, kami menggunakan arahan v-for Vue untuk mengulang melalui tatasusunan nombor dan memaparkan setiap nombor sebagai item senarai. Kemudian, kami menggunakan sintaks pendakap berganda untuk memaparkan nilai harta yang dikira total.

Apabila kita memuatkan aplikasi Vue ini, kita akan melihat output berikut:

1
2
3
4
5

Total: 15

Ringkasan:

Menjumlahkan dalam Vue adalah sangat mudah, kita hanya perlu mentakrifkan Compute a harta, menghantar data kepadanya, dan melaksanakan sebarang operasi yang diperlukan pada data. Sifat yang dikira mengemas kini secara automatik dan memaparkan hasil dalam templat menggunakan sintaks pendakap kerinting berganda. Selain itu, Vue menyediakan banyak ciri berguna lain seperti arahan, komponen dan pengendali acara yang memudahkan pembinaan aplikasi web moden.

Atas ialah kandungan terperinci Cari jumlah dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!