Vue 购物车页面计算功能的实现

Vue 购物车页面计算功能的实现

<template>
  <div>
    <table class="cart">
      <caption>
        购物车
      </caption>
      <thead>
        <th></th>
        <th>编号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>数量</th>
        <th></th>
      </thead>
      <tbody>
        <tr v-for="(row, index) in cartlist" :key="index">
          <td><input type="checkbox" v-model="row.checkbox" /></td>
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.price.toFixed(2) }}</td>
          <td>
            <button @click="row.count--" :disabled="row.count <= 1">-</button>
            {{ row.count }}
            <button @click="row.count++">+</button>
          </td>
          <td><a href="#" @click.prevent="del(index)">删除</a></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总价</td>
          <td colspan="3">￥{{ totalPrice }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
const cartArr = [
  { id: 1, checkbox: false, name: "《细说PHP》", price: 10, count: 1 },
  { id: 2, checkbox: true, name: "《细说网页制作》", price: 10, count: 1 },
  {
    id: 3,
    checkbox: true,
    name: "《细说JavaScript 语言》",
    price: 10,
    count: 1,
  },
  { id: 4, checkbox: true, name: "《细说DOM 和BOM》", price: 10, count: 1 },
  {
    id: 5,
    checkbox: false,
    name: "《细说Ajax 与jQuery》",
    price: 10,
    count: 1,
  },
  { id: 6, checkbox: true, name: "《细说HTML5 高级API》", price: 10, count: 1 },
];
export default {
  name: "app",
  data() {
    return {
      cartlist: cartArr,
    };
  },
  computed: {
    totalPrice: {
      get() {
        return this.cartlist
          .filter((row) => row.checkbox)
          .reduce((p, c) => {
            return (p += c.price * c.count);
          }, 0)
          .toFixed(2);
      },
    },
  },
  methods: {
    del(index) {
      this.cartlist.splice(index, 1);
    },
  },
};
</script>
<style>
.cart {
  width: 500px;
  border-collapse: collapse;
  text-align: center;
}
.cart td,
.cart th {
  border: 1px solid black;
  padding: 2px 3px;
}
.cart tbody tr:hover {
  background-color: #e3e3e3;
}
</style>