使用vue3+ts实现简单的商品购物车案例

最新推荐文章于 2024-07-26 15:28:27 发布

1024小神

最新推荐文章于 2024-07-26 15:28:27 发布

阅读量779

点赞数

分类专栏： HTML前端文章标签： servlet java 前端

本文链接：https://blog.csdn.net/weixin_44786530/article/details/126145570

版权

HTML前端专栏收录该内容

619 篇文章 38 订阅

订阅专栏

本文展示了一个使用Vue.js编写的购物车应用，通过响应式数据绑定和计算属性实时更新商品数量和总价。当商品数量增加、减少或删除时，总价会即时反映出变化。代码中包括商品列表、增减数量、删除商品以及总计的计算逻辑，实现了前端界面与数据的双向绑定。

摘要由CSDN通过智能技术生成

实现效果

数量可以增加和减少，价格会随着数量的改变而改变

后面的总计是商品数量的总计和价格的总计，使用了计算属性，商品的变化会直接影响总计的变化

操作支持删除，删除一个商品后，总计也会发生变化

全套代码:

<template>
  <div>
    <table class="car-box">
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in goodList" :key="index" class="row">
          <td>{{ item.name }}</td>
          <td>
            <button @click="redNum(item)">-</button>
            {{ item.num }}
            <button @click="addNum(item)">+</button>
          </td>
          <td class="price">{{ item.num * item.price }}</td>
          <td>
            <button @click="delGood(index)">删除</button>
          </td>
        </tr>
        <tr>
          <td>总计</td>
          <td>{{ sumGoodNum }}</td>
          <td class="price">{{ sumGoodPrice }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed } from "vue";

type good = {
  name: string;
  num: number;
  price: number;
};

let goodList = reactive<good[]>([
  {
    name: "上衣",
    num: 1,
    price: 100,
  },
  {
    name: "裤子",
    num: 1,
    price: 200,
  },
  {
    name: "鞋子",
    num: 1,
    price: 300,
  },
]);

// 增加商品数量的方法
let redNum = (item: good): void => {
  if (item.num > 1) {
    item.num -= 1;
  }
};
let addNum = (item: good): void => {
  if (item.num < 99) {
    item.num++;
  }
};

// 删除商品的方法
let delGood = (index: number): void => {
  goodList.splice(index, 1);
};

// 使用计算属性获取商品数量统计和价格合计
let sumGoodNum = computed(() => {
  return goodList.reduce((prev, cur) => {
    return (prev += cur.num);
  }, 0);
});
// 使用计算属性计算商品总价的和
let sumGoodPrice = computed(() => {
  return goodList.reduce((prev, cur) => {
    return (prev += cur.num * cur.price);
  }, 0);
});
</script>


<style>
.car-box {
  width: 800px;
  border: 1px solid;
}

.row {
  border-bottom: 1px solid;
}

.price {
  width: 150px;
}
</style>