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

忘是亡心i 2023-10-06 23:33 22阅读 0赞

实现效果

![bcc76286e8824f6e9283bdd0329c8070.png][]

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

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

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

全套代码:

<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>

[bcc76286e8824f6e9283bdd0329c8070.png]: https://img-blog.csdnimg.cn/bcc76286e8824f6e9283bdd0329c8070.png