Vue.js-购物车案例

1.1 项目目录

​

1.2 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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="(item, index) in books">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price | showPrice}}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 0">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td>
            <button @click="removeHandle(index)">移除</button>
          </td>
        </tr>
        </tbody>
      </table>
      <h3>总价格:{{totalPrice | showPrice}}</h3>
    </div>
    <h3 v-else>购物车为空</h3>
  </div>
</body>
  <!--引入vue-->
  <script src="../js/vue.js"></script>
  <!--引入main.js文件-->
  <script src="main.js"></script>
</html>

1.3 style.css

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

1.4 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: {
    // 加操作
    increment(index) {
      this.books[index].count++
    },

    // 减操作
    decrement(index) {
      this.books[index].count--
    },

    // 移除操作
    removeHandle(index){
      this.books.splice(index,1)
    }
  },

  // 计算属性
  computed: {
    // 定义总价格函数
    totalPrice(){
      // 设置总价格为空
      let totalPrice = 0;
      // 方式 1遍历循环
      /*
      for(let i=0; i<this.books.length; i++){
        totalPrice += this.books[i].price * this.books[i].count;
      }
      */

      // 方式2 遍历循环
      /*
      for(let i in this.books){
        totalPrice += this.books[i].price * this.books[i].count;
      }
      */
      // 方式3 遍历循环
      /*
      for (let item of this.books){
        totalPrice += item.price * item.count;
      }*/

      // 返回总价格
      // return totalPrice;
      
      // 方式四 通过高阶函数实现
      return this.books.reduce(function (preValue,book){
        return preValue + book.price * book.count
      },0)

      
    }
  },

  // 过滤器
  filters: {
    showPrice(price){
      return '¥' + price.toFixed(2);
    }
  }
})

执行结果

posted @ 2021-10-28 19:31  guardwhy  阅读(254)  评论(0)    收藏  举报