购物车练习代码

此处个人更建议使用一个计算属性来计算出 finalGoods(选中的商品)，使用 finalGoods 来进行一系列的操作，比如批量删除和结算的时候用得到

<template>
  <div id="app">
    <div id="shoppingcart">
      <table>
        <!-- 第一行 标题行 -->
        <tr>
          <td>
            <input type="checkbox" v-model="isCheckedAll" />
            全选
          </td>
          <td>商品</td>
          <td>单价(元)</td>
          <td>数量</td>
          <td>小记(元)</td>
          <td>操作</td>
        </tr>
        <!-- 第二行开始需要使用循环来渲染 -->
        <tr v-for="item in goods" :key="item.id">
          <td><input type="checkbox" v-model="item.checked" /></td>
          <td>{{ item.goods_name }}</td>
          <td>{{ item.goods_price }}</td>
          <td>
            <button @click="item.goods_num > 0 ? item.goods_num-- : ''">
              -
            </button>
            <input type="text" v-model="item.goods_num" class="ipt" />
            <button @click="item.goods_num++">+</button>
          </td>
          <td>{{ item.goods_num * item.goods_price }}</td>
          <td>
            <button class="danger" @click="deleteItem(item.id)">删除</button>
          </td>
        </tr>
      </table>
      <!-- footer部分 -->
      <footer class="footer">
        <div class="footer-left">
          <input type="checkbox" v-model="isCheckedAll" />
          <span>全选</span>
          <a @click="deleteChecked">删除选中的商品</a>
          <span>共{{ goods.length }}件商品，已选择{{ checkedLength }}件</span>
        </div>
        <div class="footer-right">
          <div>
            合计(不含运费): <span>¥ {{ totalPrice }}</span>
          </div>
          <button>去结算</button>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
// 要渲染的数据
const goods = ref([
  {
    id: 1,
    goods_name: "华为手环",
    goods_price: 169,
    goods_num: 1,
    checked: true,
  },
  {
    id: 2,
    goods_name: "索尼耳机",
    goods_price: 163,
    goods_num: 1,
    checked: true,
  },
  {
    id: 3,
    goods_name: "小米汽车",
    goods_price: 1890,
    goods_num: 1,
    checked: false,
  },
  {
    id: 4,
    goods_name: "iPhone14",
    goods_price: 1699,
    goods_num: 1,
    checked: true,
  },
]);

// 方法
// 根据 id 删除某一个项目
function deleteItem(id) {
  if (window.confirm("确定要删除该商品吗？"))
    goods.value = goods.value.filter((item) => {
      return item.id !== id;
    });
}
// 删除选中的项目
function deleteChecked() {
  if (window.confirm("确定要删除勾选的商品吗？"))
    goods.value = goods.value.filter((item) => {
      return !item.checked;
    });
}

// 计算属性
// 计算商品总价
const totalPrice = computed(() => {
  let total = 0;
  for (let item of goods.value) {
    if (item.checked) {
      total += item.goods_num * item.goods_price;
    }
  }
  return total;
});
// 计算选中的商品个数
const checkedLength = computed(() => {
  return goods.value.filter((item) => {
    return item.checked;
  }).length;
});
// 全选所有的商品
const isCheckedAll = computed({
  get() {
    return goods.value.every((item) => {
      return item.checked;
    });
  },
  set(newValue) {
    goods.value.forEach((item) => {
      item.checked = newValue;
    });
  },
});
</script>

<style scoped>
@import "./assets/shopping-cart.css";
</style>