Terokai cara menggunakan Vue.js untuk melaksanakan fungsi penjumlahan harga

Vue.js ialah rangka kerja JavaScript popular yang menyediakan banyak alat dan ciri yang berkuasa untuk mencipta aplikasi web yang cekap, interaktif dan responsif. Dalam artikel ini, kami akan meneroka cara menggunakan Vue.js untuk melaksanakan fungsi penjumlahan harga, membolehkan pengguna mengira jumlah harga item dengan cepat.

Terdapat banyak kaedah untuk melaksanakan operasi jumlah harga dalam Vue.js, tetapi artikel ini akan memperkenalkan dua kaedah yang paling biasa digunakan berikut:

Kaedah 1: Gunakan pengiraan

dalam Dalam Vue.js, atribut yang dikira digunakan untuk mengira data dan mengembalikan hasilnya. Kita boleh menggunakan pengiraan untuk mengira jumlah harga semua item.

Pertama, kita perlu mentakrifkan atribut data dalam contoh Vue, yang menyimpan harga dan kuantiti produk:

new Vue({
  el: "#app",
  data: {
    products: [
      { name: "商品1", price: 10, quantity: 1 },
      { name: "商品2", price: 20, quantity: 2 },
      { name: "商品3", price: 30, quantity: 3 }
    ]
  },
  computed: {
    totalPrice: function() {
      var total = 0;
      this.products.forEach(function(product) {
        total += product.price * product.quantity;
      });
      return total;
    }
  }
});

Dalam contoh ini, kami mentakrifkan tatasusunan produk, yang Tatasusunan mengandungi tiga item, setiap satu dengan atribut nama, harga dan kuantiti.

Seterusnya, kami mentakrifkan atribut yang dikira, totalPrice, yang digunakan untuk mengira jumlah harga semua item. Apabila mengira totalPrice, kami menggunakan kaedah forEach untuk melelaran ke atas tatasusunan produk dan mendarabkan harga setiap item dengan kuantiti dan menambahnya kepada jumlah pembolehubah.

Akhir sekali, kami mengembalikan nilai jumlah pembolehubah untuk memaparkan jumlah harga dalam templat HTML:

<div id="app">
  <ul>
    <li v-for="product in products">
      {{ product.name }} - {{ product.price }} * {{ product.quantity }} = {{ product.price * product.quantity }}
    </li>
  </ul>
  <p>总价: {{ totalPrice }}</p>
</div>

Dalam templat, kami menggunakan arahan v-for untuk lelaran atas susunan produk dan keluaran setiap Nama, harga dan kuantiti setiap produk. Kami juga menggunakan sintaks interpolasi dalam templat untuk memaparkan jumlah harga setiap item dan menggunakan {{ totalPrice }} untuk mengeluarkan jumlah harga semua item.

Kaedah 2: Gunakan jam tangan

Atribut jam tangan dalam Vue.js digunakan untuk memantau perubahan data dan melaksanakan operasi apabila data berubah. Kami boleh menggunakan jam tangan untuk memantau perubahan harga semua item dan mengemas kini jumlah harga.

Pertama, kita perlu mentakrifkan atribut data dalam contoh Vue, yang menyimpan harga dan kuantiti produk:

new Vue({
  el: "#app",
  data: {
    products: [
      { name: "商品1", price: 10, quantity: 1 },
      { name: "商品2", price: 20, quantity: 2 },
      { name: "商品3", price: 30, quantity: 3 }
    ],
    totalPrice: 0
  },
  watch: {
    products: {
      handler: function() {
        var total = 0;
        this.products.forEach(function(product) {
          total += product.price * product.quantity;
        });
        this.totalPrice = total;
      },
      deep: true
    }
  }
});

Dalam contoh ini, kami mentakrifkan tatasusunan produk, yang Mengandungi tiga produk, setiap produk mempunyai atribut nama, harga dan kuantiti. Kami juga mentakrifkan pembolehubah totalPrice yang menyimpan jumlah harga semua item.

Seterusnya, kami mentakrifkan monitor untuk mengesan perubahan dalam tatasusunan produk. Apabila tatasusunan berubah, monitor akan menjalankan gelung forEach untuk mengira jumlah harga semua item. Ia kemudiannya akan mengemas kini pembolehubah totalPrice untuk mencerminkan jumlah baharu semua harga item.

Dalam templat HTML, kami menggunakan sintaks interpolasi untuk memaparkan nama, harga dan kuantiti setiap item dan menggunakan {{ totalPrice }} untuk mengeluarkan jumlah harga semua item.

<div id="app">
  <ul>
    <li v-for="product in products">
      {{ product.name }} - {{ product.price }} * {{ product.quantity }} = {{ product.price * product.quantity }}
    </li>
  </ul>
  <p>总价: {{ totalPrice }}</p>
</div>

Ringkasan

Dalam artikel ini, kami memperkenalkan dua cara biasa untuk melaksanakan fungsi penjumlahan harga menggunakan Vue.js: dikira dan jam tangan. dikira sering digunakan untuk mengira nilai atribut, dan jam tangan sering digunakan untuk menukar data responsif. Tidak kira pendekatan yang anda ambil, Vue.js ialah alat yang mudah, pantas dan ringkas yang membantu anda mencipta aplikasi web yang berkuasa.

Atas ialah kandungan terperinci Terokai cara menggunakan Vue.js untuk melaksanakan fungsi penjumlahan harga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!