Panduan lengkap untuk melaksanakan pembelian troli beli-belah menggunakan Vue2.0

Pembelian troli beli-belah ialah salah satu fungsi terpenting dalam tapak web e-dagang moden, dan penyiapannya berjalan melalui keseluruhan proses beli-belah. Vue2.0 ialah rangka kerja JavaScript popular yang menyediakan banyak alatan untuk memudahkan pembangunan troli beli-belah. Artikel ini akan memberikan anda panduan lengkap untuk menggunakan Vue2.0 untuk melaksanakan pembelian troli beli-belah.

1. Buat objek troli beli-belah

Mula-mula, kita perlu mencipta objek untuk menguruskan item dalam troli beli-belah. Anda boleh menggunakan atribut data Vue2.0 untuk mengisytiharkan objek ini dan memulakannya:

new Vue({
  el: '#app',
  data: {
    cartItems: []
  }
});

2. Tambah item pada troli beli-belah

Cara menambah item pada beli-belah troli? Kami boleh menambah butang "tambah ke troli" pada setiap item dan mengikat pengendali acara klik padanya. Apabila butang ini diklik, objek troli beli-belah akan memanggil kaedah untuk menambah item pada troli beli-belah. Kaedah ini perlu menerima objek produk sebagai parameter.

<button v-on:click="addToCart(product)">加入购物车</button>

new Vue({
  el: '#app',
  data: {
    cartItems: []
  },
  methods: {
    addToCart: function(product) {
      this.cartItems.push(product);
    }
  }
});

3. Menunjukkan item dalam troli

Setelah item telah ditambahkan pada troli, kami perlu memaparkannya ke halaman. Anda boleh menggunakan arahan v-for Vue2.0 untuk melintasi produk dalam objek troli beli-belah dan memaparkannya dalam jadual HTML.

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>产品价格</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in cartItems">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </tbody>
</table>

4. Kira jumlah harga barang dalam troli beli-belah

Setiap kali item ditambahkan pada troli beli-belah, kami perlu mengemas kini jumlah harga barang dalam troli beli-belah. Kita boleh menggunakan sifat terkira Vue2.0 untuk melengkapkan pengiraan ini. Nilai harta yang dikira dikira berdasarkan kuantiti item dalam objek troli beli-belah dan harga setiap item.

new Vue({
  el: '#app',
  data: {
    cartItems: []
  },
  computed: {
    totalPrice: function() {
      var total = 0;
      for (var i = 0; i < this.cartItems.length; i++) {
        total += this.cartItems[i].price;
      }
      return total;
    }
  },
  methods: {
    addToCart: function(product) {
      this.cartItems.push(product);
    }
  }
});

5. Mengalih keluar item dari troli

Kadangkala, pengguna menyedari bahawa mereka tidak memerlukan item tertentu dalam troli mereka. Kami boleh menambah butang "padam" untuk setiap item dalam troli beli-belah dan mengikat pengendali acara klik padanya. Apabila butang ini diklik, objek troli beli-belah akan memanggil kaedah untuk mengalih keluar item daripada troli beli-belah. Kaedah ini perlu menerima objek produk sebagai parameter.

<table>
  <thead>
    <tr>
      <th>产品名称</th>
      <th>产品价格</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in cartItems">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td><button v-on:click="removeFromCart(item)">删除</button></td>
    </tr>
  </tbody>
</table>

6. Keranjang Keluar

Akhirnya, kami memerlukan butang "Daftar Keluar" untuk menyediakan pilihan pembayaran kepada pengguna. Apabila pengguna mengklik butang ini, objek troli beli-belah memanggil kaedah pembayaran, yang mengosongkan troli beli-belah dan memaparkan halaman terima kasih.

new Vue({
  el: '#app',
  data: {
    cartItems: []
  },
  computed: {
    totalPrice: function() {
      var total = 0;
      for (var i = 0; i < this.cartItems.length; i++) {
        total += this.cartItems[i].price;
      }
      return total;
    }
  },
  methods: {
    addToCart: function(product) {
      this.cartItems.push(product);
    },
    removeFromCart: function(item) {
      var index = this.cartItems.indexOf(item);
      if (index !== -1) {
        this.cartItems.splice(index, 1);
      }
    }
  }
});

Ringkasnya, perkara di atas adalah panduan lengkap untuk menggunakan Vue2.0 untuk melaksanakan pembelian troli beli-belah. Terdapat banyak variasi pada proses memilih item dan melaksanakan troli beli-belah anda, tetapi pelaksanaan mudah ini boleh digunakan sebagai sebahagian daripada tapak beli-belah harian anda.

Atas ialah kandungan terperinci Panduan lengkap untuk melaksanakan pembelian troli beli-belah menggunakan Vue2.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!