Bagaimana untuk mencari jumlah elemen dalam vue

Vue.js ialah rangka kerja JavaScript yang menggunakan corak MVVM untuk membina aplikasi web berskala. Vue.js memudahkan pembangun mengendalikan interaksi antara data dan UI, serta menyediakan banyak arahan dan komponen terbina dalam yang berguna.

Dalam aplikasi Vue.js, selalunya perlu melakukan pengiraan pada elemen dalam halaman, seperti jumlah, purata, dsb. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk mengira jumlah unsur.

1. Pengikatan Data

Dalam Vue.js, gunakan pengikatan data untuk mengaitkan elemen halaman dengan data dalam tika Vue.js. Kita boleh menggunakan arahan model v untuk mengikat kawalan input kepada data dan menggunakan ungkapan interpolasi {{}} untuk mengeluarkan data ke halaman. Contohnya:

<template>
  <div>
    <label>数值1:</label>
    <input type="number" v-model="num1">
    <br>
    <label>数值2:</label>
    <input type="number" v-model="num2">
    <br>
    <label>数值3:</label>
    <input type="number" v-model="num3">
    <br>
    <label>数值4:</label>
    <input type="number" v-model="num4">
    <br>
    <label>总和:</label>
    <span>{{ sum }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
    }
  },
  computed: {
    sum() {
      return parseInt(this.num1) + parseInt(this.num2) + parseInt(this.num3) + parseInt(this.num4);
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan komponen Vue.js, yang mengandungi 4 kotak input dan kotak output. Setiap kotak input terikat pada item data dalam contoh Vue.js, dan kami menggunakan sifat yang dikira untuk mengira jumlah dan mengeluarkan hasil ke halaman.

2. Sifat terkira

Sifat terkira ialah ciri yang sangat berguna dalam Vue.js yang membolehkan kami mentakrifkan sifat terbitan berdasarkan data lain. Sifat yang dikira boleh dicache dan dikira semula hanya apabila data yang berkaitan berubah. Untuk atribut yang perlu dikira dengan kerap, menggunakan atribut yang dikira boleh meningkatkan prestasi dan mengelakkan pengiraan berulang. Kita boleh menggunakan sifat yang dikira untuk mengira jumlah elemen, contohnya:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} 
      </li>
    </ul>
    <label>总和:</label>
    <span>{{ sum }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  computed: {
    sum() {
      return this.items.reduce(function (total, num) {
        return total + num;
      }, 0);
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan item tatasusunan dan menggunakan arahan v-for untuk menjadikannya senarai tidak tertib. Kami menggunakan harta yang dikira untuk mengira jumlah dan kaedah mengurangkan untuk mengumpul semua elemen dalam tatasusunan.

3. Penggunaan

Sifat yang dikira sesuai untuk digunakan dalam templat, tetapi jika kita perlu melakukan beberapa operasi dalam contoh Vue.js dan mengembalikan hasil yang dikira, kita boleh menggunakan kaedah. Kaedah tidak dicache dan dikira semula setiap kali ia dipanggil, jadi mungkin tidak secekap sifat yang dikira. Contohnya:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} 
      </li>
    </ul>
    <label>总和:</label>
    <span>{{ getSum() }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4]
    }
  },
  methods: {
    getSum() {
      return this.items.reduce(function (total, num) {
        return total + num;
      }, 0);
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan kaedah getSum(), gunakan kaedah reduce untuk mengira jumlah elemen dan panggilnya dalam templat dan keluarkan hasilnya.

Kesimpulan

Secara amnya, pengikatan data, sifat dan kaedah yang dikira boleh digunakan untuk mencari jumlah elemen dalam aplikasi Vue.js Cuma pilih kaedah yang sesuai mengikut situasi tertentu. Vue.js menyediakan cara yang sangat mudah untuk mengendalikan interaksi antara data dan UI, membolehkan kami menumpukan lebih pada pelaksanaan logik perniagaan. Melalui pengenalan artikel ini, saya percaya bahawa pembaca mempunyai pemahaman yang lebih mendalam tentang Vue.js untuk mencari jumlah elemen.

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