Vue学习笔记（二）——购物车案例

最新推荐文章于 2022-03-15 16:27:43 发布

Coder_小庞

最新推荐文章于 2022-03-15 16:27:43 发布

阅读量117

点赞数 1

分类专栏： Vue 前端购物车文章标签： vue css html

本文链接：https://blog.csdn.net/qq2297329956/article/details/113261912

版权

Vue 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

购物车

1 篇文章 0 订阅

订阅专栏

Vue学习笔记（二）——购物车案例

文章目录

Vue学习笔记（二）——购物车案例

一、购物车案例

用到了比较多的Vue的基础知识：包括计算属性，插值运算等等，是一个比较好的例子。

1.结果展示

在这里插入图片描述

二、源码

在这里插入图片描述
index.html源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>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 v-for="value in item">{{value}}</td>-->
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.date}}</td>
          <!--<td>{{getFinalPrice(item.price)}}</td>-->
          <td>{{item.price | showFinalPrice}}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td>
            <button @click="remove(index)">移除</button>
          </td>
        </tr>
        </tbody>
      </table>
      <h2>总价格：{{totalPrice | showFinalPrice}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script src="main.js"></script>
</body>

</html>

style.css 源码

table {
  border:1px solid black;
  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;
}

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: {
    getFinalPrice (price) {
      return '￥'+price.toFixed(2);
    },
    decrement (index) {
      return this.books[index].count--;
    },
    increment (index) {
      return this.books[index].count++;
    },
    remove(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: {
    showFinalPrice (price) {
      return '￥'+price.toFixed(2);
    }
  }
})