Vue3的购物车系统：购物体验的革命

前端

2023-11-30 19:40:44

Vue3 购物车系统：提升您的网购体验

简介

作为一名热衷购物的消费者，您是否曾因以下网购问题而苦恼不已？

反复点击添加按钮和计算总价的繁琐操作。
勾选并逐个添加多件商品时浪费的时间。
难以在商品数量众多时计算总价和更新购物车信息。

Vue3 购物车系统的革命

为了解决这些痛点，我们引入了功能强大的 Vue3 购物车系统 。这是一个便捷易用、功能齐全的购物车系统，旨在彻底改善您的购物体验。

特色功能

全选和反选：
只需点击一个按钮，即可快速完成所有商品的全选或反选。

数量计算：
轻松增减商品数量，系统自动计算总价，助您时刻掌控购物信息。

实时更新：
购物车信息会根据商品选择和数量变化实时更新，让您时刻掌握购物进度。

简洁的代码：
整个购物车系统采用简洁的 Vue3 代码实现，易于理解和维护。

实现指南

安装 Vue3

npm install vue@next --save

创建 Vue3 实例

const app = createApp({
  data() {
    return {
      products: [
        // 商品列表，包括商品 id、名称和价格
      ],
      selectedProducts: [], // 已选商品
      totalPrice: 0 // 总价
    }
  },
  methods: {
    // 添加商品到购物车
    addToCart(product) {
      this.selectedProducts.push(product)
      this.calculateTotalPrice()
    },
    // 从购物车移除商品
    removeFromCart(product) {
      this.selectedProducts = this.selectedProducts.filter(p => p.id !== product.id)
      this.calculateTotalPrice()
    },
    // 全选
    selectAll() {
      this.selectedProducts = this.products
      this.calculateTotalPrice()
    },
    // 反选
    deselectAll() {
      this.selectedProducts = []
      this.calculateTotalPrice()
    },
    // 计算总价
    calculateTotalPrice() {
      this.totalPrice = this.selectedProducts.reduce((acc, product) => acc + product.price, 0)
    }
  }
})

构建购物车界面

<template>
  <div>
    <!-- 商品列表 -->
    <ul>
      <li v-for="product in products" :key="product.id">
        <!-- 商品选择框 -->
        <input type="checkbox" v-model="selectedProducts" :value="product">
        <!-- 商品名称和价格 -->
        {{ product.name }} - {{ product.price }}
        <!-- 添加到购物车按钮 -->
        <button @click="addToCart(product)">Add to Cart</button>
        <!-- 从购物车移除按钮 -->
        <button @click="removeFromCart(product)">Remove from Cart</button>
      </li>
    </ul>
    <!-- 全选按钮 -->
    <button @click="selectAll">Select All</button>
    <!-- 反选按钮 -->
    <button @click="deselectAll">Deselect All</button>
    <!-- 总价 -->
    <div>Total Price: {{ totalPrice }}</div>
  </div>
</template>