通过Vue.js实现简单的图书购物车小项目

小何同学－

已于 2022-03-07 15:42:05 修改

阅读量1.7k

点赞数 1

文章标签： javascript vue.js 前端

于 2022-03-07 11:01:46 首次发布

本文链接：https://blog.csdn.net/m0_47807991/article/details/123325519

版权

①书籍购物车案例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书购物车</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <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="(book,index) in books">
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.date}}</td>
            <td>{{getFinalPrice(book.price)}}</td>
            <!-- 也可以用过滤器的方式  保留两位小数-->
            <!-- <td>{{book.price | showPrice}}</td> -->
            <td>
              <!-- disabled属性： 让按钮失效 -->
              <button @click="decrement(index)" :disabled="book.count <= 1">-</button>
              {{book.count}}
              <button @click="increment(index)">+</button>
            </td>
            <td><button @click="removeHandler(index)">移除</button></td>
          </tr>
        </tbody>
      </table>
      <h2>总价格:{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>购物车为空！</h2>
  </div>

  <script src="../../../JS/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 001,
        name:'《深入理解Java虚拟机》',
        date: '2010-05',
        price: 128.00,
        count:1
      },
      {
        id: 002,
        name:'《大话数据结构》',
        date: '2018-06',
        price: 59.50,
        count:1
      },
      {
        id: 003,
        name:'《web前端开发入门与实践》',
        date: '2019-03',
        price: 69.00,
        count:1
      },
      {
        id: 004,
        name:'《java设计模式》',
        date: '2017-06',
        price: 79.00,
        count: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;
       // 也可以写成：
      // for(let i of this.books){
      //   let totalPrice = 0;
      //   for(let book of thisbooks){
      //     totalPrice += book.price*book.count;
      //   }
      // }
      // redece写法：
      // return this.books.reduce(function(preValue,book){
      //   return preValue + book.price * book.count
      // },0)
    }
  },
  methods: {
    getFinalPrice(price){
      return '$' + price.toFixed(2);
    },
    decrement(index) {
      this.books[index].count--;
    },
    increment(index) {
      this.books[index].count++;
    },
    removeHandler(index) {
      this.books.splice(index,1)
    }
  },
  filters: {
    showPrice(price) {
      return '$' + price.toFixed(2);
    }
  }
})

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