VUE案例4：以图书购买为例的购物车应用

本文介绍了VUE案例4：以图书购买为例的购物车应用，调用图书列表，增加或减少图书数量自动计算价格，移除可以删除列表。

效果如下：

开发思路：

商品需要使用v-for指令循环展示，商品增减和移除分别对应三个函数

总价使用计算属性计算，并使用过滤器处理数据格式

定义商品属性，三个函数对应商品数量增减和移除

定义计算属性计算总价

定义过滤器处理价格格式

代码如下：

template

<template>
  <div class="demo">
    <div v-if="books.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in books">
            <th>{{ item.id }}</th>
            <th>{{ item.name }}</th>
            <th>{{ item.date }}</th>
            <th>{{ item.price | finalPrice }}</th>
            <th>
              <button type="button" @click="decrement(index)" :disabled="item.count <= 1">-</button>
              {{ item.count }}
              <button type="button" @click="increment(index)">+</button>
            </th>
            <th>
              <button type="button" @click="removeBook(index)">移除</button>
            </th>
          </tr>
        </tbody>
      </table>
      <h2 style=" text-align: left; ">总价格：{{ totalPrice | finalPrice }}</h2>
    </div>
    <h2 v-else>
      购物车为空
    </h2>
  </div>
</template>

script

<script>
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          name: '围城',
          date: '2024-7-15',
          price: 35.00,
          count: 1
        },
        {
          id: 2,
          name: '顽主',
          date: '2024-7-15',
          price: 30.00,
          count: 1
        },
        {
          id: 3,
          name: '玩的就是心跳',
          date: '2024-7-15',
          price: 30.00,
          count: 1
        },
        {
          id: 4,
          name: '过把瘾就死',
          date: '2024-7-15',
          price: 30.00,
          count: 1
        },
        {
          id: 5,
          name: '看上去很美',
          date: '2024-7-15',
          price: 30.00,
          count: 1
        }

      ]
    }
  },
  methods: {
    decrement(index) {
      this.books[index].count--
    },
    increment(index) {
      this.books[index].count++
    },
    removeBook(index) {
      this.books.splice(index, 1)
    }
  },
  computed: {
    totalPrice() {
      let totalPrice = 0;
      for (let i = 0; i < this.books.length; i++) {
        totalPrice += this.books[i].price * this.books[i].count;
      }
      return totalPrice;
    }
  },
  filters: {
    finalPrice(price) {
      return "$" + price.toFixed(2)
    }
  }
};
</script>

style

<style>
table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
</style>