Vue.js 购物车示例：从零开始构建

最新推荐文章于 2025-04-18 23:57:52 发布

原创最新推荐文章于 2025-04-18 23:57:52 发布

· 711 阅读

6 ·

版权

文章标签：

#vue.js #前端 #javascript #css #ecmascript

在前端开发中，购物车功能是电商网站的核心组件之一。通过 Vue.js，我们可以快速构建一个交互式的购物车系统。本文将通过一个简单的示例，展示如何使用 Vue.js 实现一个基本的购物车功能。

一、项目背景

随着互联网的发展，电商网站的用户体验变得越来越重要。购物车作为用户购买商品的重要环节，其设计和实现需要简洁且高效。Vue.js 作为一种渐进式 JavaScript 框架，以其简洁的语法和高效的性能，成为了构建购物车功能的理想选择。

二、代码实现

（一）HTML 结构

HTML 是整个购物车的骨架，我们使用了简单的 HTML5 结构来构建页面。页面分为两部分：添加商品到购物车和购物车列表。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js 购物车示例</title>
  <!-- 引入 vue的 cdn -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    /* 省略样式代码 */
  </style>
</head>

<body>
  <div class="container" id="app">
    <h1>购物车示例</h1>

    <!-- 添加商品到购物车 -->
    <div class="add-goods">
      <h2>添加商品</h2>
      <div>
        <!-- 这里输入商品的id  相同的id 会归类 到一起 -->
        <label for="goods-id">商品ID：</label>
        <input type="number" id="goods-id" v-model.number="newGoods.id">
      </div>
      <div>
        <!-- 显示 商品的名字 -->
        <label for="goods-name">商品名称：</label>
        <input type="text" id="goods-name" v-model="newGoods.name">
      </div>
      <button @click="addToCart(newGoods)">添加到购物车</button>
    </div>

    <!-- 购物车列表 -->
    <div>
      <h2>购物车</h2>
      <div v-for="item in cartList" :key="item.id" class="cart-item">
        <span>{{ item.name }} (数量: {{ item.num }})</span>
        <button @click="removeGoods(item)">移除</button>
      </div>
    </div>
  </div>

  <script>
    // 省略 Vue 实例代码
  </script>
</body>

</html>

（二）CSS 样式

CSS 用于美化页面，使其更具可读性和用户体验。我们为页面的各个部分设置了基本的样式，包括字体、背景颜色、边框等。

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f4f4f4;
  color: #333;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2 {
  text-align: center;
  color: #2c3e50;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
}
.cart-item span {
  margin-right: 10px;
}
.cart-item button {
  background: #42b983;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.cart-item button:hover {
  background: #3498db;
}
.add-goods {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.add-goods div {
  margin-bottom: 10px;
}
.add-goods label {
  margin-right: 10px;
}
.add-goods input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.add-goods button {
  background: #2c3e50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.add-goods button:hover {
  background: #3498db;
}

（三）Vue 实例

Vue 实例是整个购物车的核心，它管理着页面的数据和逻辑。

new Vue({
  el: '#app',
  data: {
    cartList: [
      { id: 1, name: "苹果", num: 2 },
      { id: 2, name: "香蕉", num: 1 }
    ],
    newGoods: {
      id: null,
      name: ''
    }
  },
  methods: {
    addToCart(goods) {
      // 检查购物车中是否已存在该商品
      const existingItem = this.cartList.find(item => item.id === goods.id);

      if (existingItem) {
        // 如果已存在，数量加1
        existingItem.num++;
      } else {
        // 如果不存在，添加新商品，并设置数量为1
        this.cartList.push({ ...goods, num: 1 });
      }
    },
    removeGoods(goods) {
      // 如果商品数量大于1，数量减1
      if (goods.num > 1) {
        goods.num--;
      } else {
        // 如果商品数量为1，从购物车中移除该商品
        this.cartList = this.cartList.filter(item => item.id !== goods.id);
      }
    }
  }
});

三、功能解析

（一）添加商品

用户可以通过输入商品 ID 和名称，点击“添加到购物车”按钮，将商品添加到购物车中。Vue 的 v-model 指令用于双向绑定输入框的值和数据，@click 指令用于绑定点击事件。

（二）购物车列表

购物车列表通过 v-for 指令动态生成，每个商品项都有一个“移除”按钮，点击按钮可以减少商品数量或将其从购物车中移除。

四、蓝桥杯原题

具体需求如下：

（1）修改 addToCart 方法，实现将商品加入到购物车的功能。即：

点击“加入购物车”按钮后，如果购物车中不存在该商品，则将该商品添加到购物车末尾，并初始化数量为 1；
如果购物车中已存在该商品，则只在原数量上 +1 即可。

（2）完善 removeGoods 方法，实现移出购物车商品功能。即：

点击购物车商品后对应的减号（“-”）按钮，将其数量在原数量上 -1；
如果减后数量为 0，则将该商品从购物车中移除

    addToCart(goods){
      // TODO：修改当前函数，实现购物车加入商品需求

      // cartList 是用来 存放 两个 数组 的
      // 这个 意思 是用来循环 显示 数组里面的 数据 v-for 的使用 
      // 将 id 为1 和id 为2 的 过滤出来  分别 存入 数组 
      let arr1 = this.cartList.filter(item => { return item.id == goods.id })
      // 如果 数据长度 有 
      if (arr1.length) {
        // 则第一个元素 +1
        arr1[0].num++

      } else {
        // 否则是第一个元素  等于1 然后 添加到 cartList 里面去
        goods.num = 1;
        // 只有当是第一件的时候才需要 添加 到这个里面去，
        this.cartList.push(goods);
      }
      this.cartList = JSON.parse(JSON.stringify(this.cartList));
    },
    removeGoods(goods){
      // TODO：补全代码实现需求
      // 如果 不符合 就会 返回 空数组  
      // filter  如果 里面的条件 都 不符合 就会返回 空数组
      goods.num > 1 ? goods.num-- : this.cartList = this.cartList.filter((item) => item.num > 1)
    }