当前位置：首页 > VUE

用vue实现简易购物车

2026-01-12 08:32:58VUE

实现简易购物车的Vue代码

以下是一个基于Vue 3的简易购物车实现方案，包含商品展示、添加删除、价格计算等核心功能。

项目结构

src/
├── components/
│   ├── CartItem.vue
│   └── ProductList.vue
├── App.vue
└── main.js

核心代码实现

App.vue（主组件）

用vue实现简易购物车

<template>
  <div class="app">
    <h1>简易购物车</h1>
    <ProductList :products="products" @add-to-cart="addToCart" />
    <div class="cart">
      <h2>购物车 ({{ cartItems.length }})</h2>
      <CartItem 
        v-for="item in cartItems" 
        :key="item.id" 
        :item="item"
        @remove-from-cart="removeFromCart"
      />
      <div class="total">总计: ¥{{ totalPrice.toFixed(2) }}</div>
    </div>
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue'
import CartItem from './components/CartItem.vue'

export default {
  components: { ProductList, CartItem },
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100 },
        { id: 2, name: '商品B', price: 200 },
        { id: 3, name: '商品C', price: 300 }
      ],
      cartItems: []
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
    }
  },
  methods: {
    addToCart(product) {
      const existingItem = this.cartItems.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity++
      } else {
        this.cartItems.push({ ...product, quantity: 1 })
      }
    },
    removeFromCart(itemId) {
      this.cartItems = this.cartItems.filter(item => item.id !== itemId)
    }
  }
}
</script>

<style>
.app {
  display: flex;
  gap: 2rem;
  padding: 2rem;
}
.cart {
  border: 1px solid #ddd;
  padding: 1rem;
  min-width: 300px;
}
.total {
  font-weight: bold;
  margin-top: 1rem;
}
</style>

ProductList.vue（商品列表组件）

用vue实现简易购物车

<template>
  <div class="product-list">
    <h2>商品列表</h2>
    <div v-for="product in products" :key="product.id" class="product">
      <span>{{ product.name }} - ¥{{ product.price }}</span>
      <button @click="$emit('add-to-cart', product)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['products']
}
</script>

<style>
.product {
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}
</style>

CartItem.vue（购物车商品项组件）

<template>
  <div class="cart-item">
    <span>{{ item.name }} x {{ item.quantity }}</span>
    <span>¥{{ (item.price * item.quantity).toFixed(2) }}</span>
    <button @click="$emit('remove-from-cart', item.id)">删除</button>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style>
.cart-item {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
}
</style>