08-Vue实现书籍购物车案例

标签: Vue学习  vue.js


书籍购物车案例

要求1:书架上有四种书以及每种书的信息,要求购物车根据每种书本的数量自动求出总价。
要求2:所以的价格要符合类似¥85.00的格式。
要求3:每种书的数量减少到1时,减少按钮不可点击,且购物车有移除书本各类的功能。
要求4:当购物车为空时,购物车显示出“购物车为空”

index.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 cellspacing="0px">
          <thead align="center">
            <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.createDate}}</td>
              <td>{{book.price | showPrice}}</td>
              <td>
                <button @click="decrement(index)" :disabled="book.amount===1">
                  -</button
                >{{book.amount}}<button @click="increment(index)">+</button>
              </td>
              <td><button @click="removeHandle(index)">移除</button></td>
            </tr>
          </tbody>
        </table>
        <h2>总价格:{{totalPrice | showPrice}}</h2>
      </div>
      <div v-else>
        <h2>购物车为空</h2>
      </div>
    </div>

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

main.js

const app = new Vue({
  el: "#app",
  data: {
    books: [
      {
        id: 1,
        name: "《操作系统》",
        createDate: "2006-9",
        price: 85.0,
        amount: 1
      },
      {
        id: 2,
        name: "《UNIX编程艺术》",
        createDate: "2006-2",
        price: 59.0,
        amount: 1
      },
      {
        id: 3,
        name: "《编程珠玑》",
        createDate: "2008-10",
        price: 39.0,
        amount: 1
      },
      {
        id: 4,
        name: "《代码大全》",
        createDate: "2004-3",
        price: 128.0,
        amount: 1
      }
    ]
  },
  computed: {
	totalPrice(){
	  let totalPrice = 0
      for (let item of this.books) {
        totalPrice += item.price * item.amount
      }
      return totalPrice
	}
},
  methods: {
    increment(index) {
      this.books[index].amount++
    },
    decrement(index) {
      this.books[index].amount--
    },
    removeHandle(index) {
      this.books.splice(index, 1)
    }
  },
  filters: {
    showPrice(price) {
      return "¥" + price.toFixed(2)
    }
  }
})

style.css

table {
  border: 1px solid #e9e9e9;
}

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

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 900;
}
1.内容讲解
  • 写一个table和thead,tbody中每一个tr都用来遍历data变量中的books列表。
<table cellspacing="0px">
	<thead align="center">
	<tr>
      <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.createDate}}</td>
      <td>{{book.price | showPrice}}</td>
    </tr>
  </tbody>
</table>

结果如下:
在这里插入图片描述

  • 在thead中加上购买数量和操作,并在对应的tbody中加入对应的按钮。结果如下:
    在这里插入图片描述
  • 为每个+和-按钮添加事件,将index作为参数传入,并判断当数量为1时,按钮-不可点击。
<td>
	<button @click="decrement(index)" :disabled="book.amount===1">-</button>
	{{book.amount}}
	<button @click="increment(index)">+</button>
</td>
increment(index) {
	this.books[index].amount++
},
decrement(index) {
	this.books[index].amount--
}

结果如下:
在这里插入图片描述

  • 为每个移除按钮添加事件,将index作为参数传入,用splice方法将其删除即可,点击查看splice详解
<td><button @click="removeHandle(index)">移除</button></td>
removeHandle(index) {
	this.books.splice(index, 1)
}

结果如下:
在这里插入图片描述

  • 为每个价格添加过滤器,将所有的价格改成¥85.00格式,先在前面加上"¥",其中toFixed(2)即保留两位小数,点击查看过滤器详情
<!-- 表格中的价格 -->
<td>{{book.price | showPrice}}</td>
<!-- 总价的价格 -->
<h2>总价格:{{totalPrice | showPrice}}</h2>
showPrice(price) {
	return "¥" + price.toFixed(2)
}

结果如下:
在这里插入图片描述

  • 判断当购物车为空时,显示购物车为空,将整个table用div包裹,用v-if判断books的length是否为0,为0则显示“购物车为空”。结果如下:
    在这里插入图片描述
  • 在表格下面加上总价格,并用计算属性计算总价格,直接将每种书的数量乘以每种书的价格求合即可。当书的数量更改时,总价格会跟着自动更改。
totalPrice(){
  let totalPrice = 0
  for (let item of this.books) {
    totalPrice += item.price * item.amount
  }
  return totalPrice
}

结果如下:
在这里插入图片描述

2.归纳总结

看着很复杂的要求,还是被一步步解决。在不熟悉的情况下,做这种综合多种知识点的问题一定要先在脑海中分清先后顺序,找到不同知识点的连接点,然后分解多个步骤解决。


第一次记录自己的学习笔记,如果您发现问题,欢迎指点。

版权声明:本文为qq_42647711原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42647711/article/details/104602372

智能推荐

人脸识别之疲劳检测(二)阈值法、KNN分类和K-means聚类

Table of Contents 1、均值法 2、中值法 3、KNN 4、K-means 结合上一节在获得人眼特征点后需要对睁眼闭眼状态做出判断,方法的选择需要经验结合公平的评价方法,使用大量测试集得到不同方法下的精确度并做出比较: 1、均值法 50帧睁眼数据取均值,得到不同阈值下精确度。 2、中值法 50帧睁眼数据取中值,得到不同阈值下精确度。 3、KNN KNN是一种ML常用分类算法,通过测...

CodeForce Tic-Tac-Toe

Two bears are playing tic-tac-toe via mail. It's boring for them to play usual tic-tac-toe game, so they are a playing modified version of this game. Here are its rules. The game is played on the foll...

Python雾里看花-抽象类ABC (abstract base class)

首先认识模块 abc,python中没有提供抽象类与抽象方法,然而提供了内置模块abc来模拟实现抽象类,例如提供泛映射类型的抽象类 abc.MutableMapping 继承abc.MutableMapping构造一个泛映射类型(类似python中的dict) 当然继承abc.Mapping 也可以,毕竟MutableMapping是其子类 dict是python中典型的映射类型数据结构,其接口的...

python 文件操作

2, with open (‘xx.txt’,‘w’,encoding=‘utf-8’) as f: f.write(‘文件内容或对象’)...

【Python基础】使用统计函数绘制简单图形

机器学习算法与自然语言处理出品 @公众号原创专栏作者 冯夏冲 学校 | 哈工大SCIR实验室在读博士生 2.1 函数bar 用于绘制柱状图 2.2 函数barh 用于绘制条形图 2.3 函数hist 用于绘制直方图 直方图与柱状图的区别 函数pie 用于绘制饼图 2.5 函数polor 用于绘制极线图 极线图是在极坐标系上绘出的一种图。在极坐标系中,要确定一个点,需要指明这个点距原点的角...

猜你喜欢

css:顶部按钮固定,上面内容滑动

这种需求我们平时见到很多的,实现方法也多的参差不齐,下面我说一种简单的。如图: 可以看到只有红线部分滚动,底下按钮是固定的。 代码...

环形公路堵车概率模型(含详细解析)

文章目录 基础理论 代码实现 图形分析 基础理论 路面上有n辆车,以不同的速度向前行驶, 模拟堵车问题。 有以下假设: 假设某辆车的当前速度是v。 若前方可见范围内没车,则它在下一秒的车速提高到v+1,直到达到规定的最高限速。 若前方有车,前车的距离为d,且d < v,则它下 一秒的车速降低到d-1 。 每辆车会以概率p随机减速v-1。、 代码实现 图形分析 图形中颜色越重的地方,说明很多车...

JavaScript事件处理的例题

知道的越多,所不知道的越多。如果带给你帮助,点赞支持一下。 JavaScript事件处理的例题 1、表单验证 2、验证数字输入 3、利用document对象的bgColor属性改变背景色,添加鼠标悬停事件 4.附加题(选做) 1、表单验证 要求:用户名不少于2位,并且用户名第一个字符需为字母! 密码长度必须在6~15之间。 2、验证数字输入 如果输入的值 x 不是数字或者小于 1 或者大于 10,...

arduino操作光照传感器BH1750(数字型,I2C接口)

BH1750传感器,用于检测环境光光照强度。 BH1750FVI是日本罗姆(ROHM)半导体生产的数字式环境光传感IC。其主要特性有: I2C数字接口,支持速率最大400Kbps 输出量为光照度(Illuminance) 测量范围1~65535 lux,分辨率最小到1lux 低功耗(Power down)功能 屏蔽50/60Hz市电频率引起的光照变化干扰 支持两个I2C地址,通过ADDR引脚选择 ...

10.31 数组算法学习-冒泡、选择、二分法

  冒泡排序:   冒泡排序 https://blog.csdn.net/kelinfeng16/article/details/84034386 原文地址:https://github.com/hustcc/JS-Sorting-Algorithm/blob/master/2.selectionSort.md 冒泡排序(Bubble Sort)也是一种简单直观的排序算法。它重...