Vue实现简易的图书购物车

最新推荐文章于 2023-08-16 15:11:17 发布

刘小帅574

最新推荐文章于 2023-08-16 15:11:17 发布

阅读量293

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_62357630/article/details/129767276

版权

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图书购物车</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(book, index) in books" :key="book.id">
            <td>{{ index + 1 }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.date }}</td>
            <td>{{ book.price }}</td>
            <td>
              <button @click="decreaseCount(book)" :disabled="book.count < 1">-</button>
              {{ book.count }}
              <button @click="increaseCount(book)">+</button>
            </td>
            <td><button @click="removeBook(index)">移除</button></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3"></td>
            <td>总价：{{ totalPrice }}</td>
            <td>总数量：{{ totalCount }}</td>
            <td><button @click="removeAllBooks()" v-if="books.length > 0">清空购物车</button></td>
          </tr>
        </tfoot>
      </table>
      <p v-if="books.length === 0">购物车为空</p>
    </div>
    <script src="vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>

style.css

table {
    margin: 20px auto;
    border-collapse: collapse;
    text-align: center;
    font-size: 16px;
    width: 80%;
  }
  
  th, td {
    padding: 10px;
    border: 1px solid #ccc;
  }
  
  thead {
    background-color: #eee;
  }
  
  tfoot {
    font-weight: bold;
  }
  
  button {
    padding: 5px 10px;
    border: none;
    background-color: #008CBA;
    color: #fff;
    cursor: pointer;
  }
  
  button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  p {
    text-align: center;
    font-size: 24px;
    margin: 50px auto;
  }

main.js

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
      },
    ]
  },
  methods: {
    removeAllBooks() {
      this.books.forEach(book => {
        book.count = 0;
      });
    },
    removeBook(index) {
      this.books.splice(index, 1);
    },
    increaseCount(book) {
      book.count++;
    },
    decreaseCount(book) {
      if (book.count > 0) {
        book.count--;
      }
    },
  },
  computed: {
    totalPrice() {
      return this.books.reduce((total, book) => {
        return total + book.price * book.count;
      }, 0);
    },
    totalCount() {
      return this.books.reduce((total, book) => {
        return total + book.count;
      }, 0);
    },
  }
});

vue.js自己下载