购物车案例

经过一系列的学习，我们这里来练习一个购物车的案例

  需求：使用vue写一个表单页面，页面上有购买的数量，点击按钮+或者-，可以增加或减少购物车的数量，数量最少不得少于0，点击移除按钮，会移除该商品，当把所有的商品移除后，页面上的表单消失，然后出现文字：购物车为空，表单下方是商品的总价格，随着商品的数量增加而增加，默认是0元，总体效果如下：

代码实现

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="../js/vue.js"></script>

  <style>

    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;

    }

  </style>

</head>

<body>

<div id="app">

  <div v-if="books.length">

    <table>

      <thread>

        <tr>

          <th></th>

          <th>书籍名称</th>

          <th>出版日期</th>

          <th>价格</th>

          <th>购买数量</th>

          <th>操作</th>

        </tr>

      </thread>

      <tbody>

      <tr v-for="(book, index) in books" :key="book">

        <td>{{index+1}}</td>

        <td>{{book.name}}</td>

        <td>{{book.publish_date}}</td>

        <td>{{book.price | showPrice}}</td>

        <td>

          <button @click="decrease(index)" :disabled="book.count <= 0">-</button>

          {{book.count}}

          <button @click="increase(index)">+</button>

        </td>

        <td>

          <button @click="removeClick(index)">移除</button>

        </td>

      </tr>

      </tbody>

    </table>

    <p>总价：{{totalPrice | showPrice}}</p>

  </div>

  <h2 v-else>购物车为空</h2>

</div>

<script>

  const app = new Vue({

    el: "#app",

    data: {

      books: [

        {"name":"算法导论", "publish_date":"2006-9", "price":20.00, "count": 0},

        {"name":"UNIX编程艺术", "publish_date":"2006-2", "price":30.00, "count": 0},

        {"name":"编程技术", "publish_date":"2008-10", "price":40.00, "count": 0},

        {"name":"代码大全", "publish_date":"2006-3", "price":50.00, "count": 0},

      ],

    },

    methods: {

      // 增加+

      decrease(index){

        this.books[index].count-=1

      },

      // 减少-

      increase(index){

        this.books[index].count+=1

      },

      // 移除按钮

      removeClick(index){

        this.books.splice(index, 1)

      }

    },

    computed: {

      // 计算总价格

      totalPrice(){

        let totalPrice = 0

        for (let item of this.books){

          totalPrice += item.price * item.count

        }

        return totalPrice

      }

    },

    // 过滤器，将价格过滤成有2位小数的

    filters: {

      showPrice(price){

        return '￥' + price.toFixed(2)

      }

    }

  })

</script>

</body>

</html>

以上就是全部代码，当中使用到了很多知识点

  • v-for：循环，循环books列表
  • v-on：事件监听，监听点击事件
  • disabled：按钮是否可以点击的属性，为True可点击，为False不可点击，增加判断条件:disabled="book.count <= 0"当购物车数量≤0，则无法点击
  • v-if和v-else：条件判断，判断books的列表长度，如果有长度展示列表，如果长度为0则展示文字购物车为空
  • filters：自定义过滤器，过滤价格，使本身的价格过滤后带有2位小数
  • computed：计算属性，计算购物的总价格

Vue（9）购物车练习的更多相关文章

  1. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. Vue实战-购物车案例

    Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...

  3. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  4. vue实战记录（六）- vue实现购物车功能之地址列表选配

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...

  5. vue实战记录（四）- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

  6. vue实战记录（三）- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  7. vue实战记录（二）- vue实现购物车功能之创建vue实例

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...

  8. vue实战记录（一）- vue实现购物车功能之前提准备

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...

  9. vue实现购物车和地址选配

    参考文献        vue.js官网 项目演示:数据渲染,格式化数据,点击加,减号自动加减 项目准备 1. 项目css和js文件  https://github.com/4561231/hello ...

  10. vue.js购物车

    vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...

随机推荐

  1. DataGear 变更部署数据库为SQL Server填坑指南（含转写后的SQL server代码及SQL server配置文件）

    1. 引言 2. 配置数据库链接 3. 引入数据库驱动 4. 手动初始化数据库 5. 改写SQL 6. 其他 7. 参考 1. 引言 DataGear默认使用Derby数据库作为系统的元数据库,至于待 ...

  2. MegaCli是一款管理维护硬件RAID软件，可以通过它来了解当前raid卡的所有信息，包括 raid卡的型号，raid的阵列类型，raid 上各磁盘状态

    MegaCli 监控raid状态 转载weixin_30344131 最后发布于2015-10-16 13:05:00 阅读数    简介 MegaCli是一款管理维护硬件RAID软件,可以通过它来了 ...

  3. Java Stream 流（JDK 8 新特性）

    什么是 Steam Java 8 中新增了 Stream(流)来简化集合类的使用,Stream 本质上是个接口,接口中定义了很多对 Stream 对象的操作. 我们知道,Java 中 List 和 S ...

  4. 【转】Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 9.11 strace：跟踪进程的系统调用 、ltrace：跟踪进程调用库函数

    strace 是Linux环境下的一款程序调试工具,用于检查一个应用程序所使用的系统调用以及它所接收的系统信息.strace会追踪程序运行时的整个生命周期,输出每一个系统调用的名字.参数.返回值和执行 ...

  6. Java核心技术卷阅读随笔--第3章【Java 的基本程序设计结构】

    Java 的基本程序设计结构 现在, 假定已经成功地安装了 JDK,并且能够运行第 2 章中给出的示例程序.我们从现在开始将介绍 Java 应用程序设计.本章主要介绍程序设计的基本概念(如数据类型.分 ...

  7. xshell中登录服务器图形化界面

    安装全套的xmanager程序 打开xshell工具程序 点击新建 输入ip等必要信息 点击隧道,英文版为tunnel 勾选红色的选项1和2 填写一些用户名和密码信息(图就略了O(∩_∩)O) 敲入指 ...

  8. HDFS 05 - HDFS 的元数据管理（FSImage、EditLog、Checkpoint）

    目录 1 - NameNode 的启动流程 2 - NameNode 的元数据 2.1 EditLog 操作日志 2.2 查看 EditLog 文件 2.3 FSImage 元数据镜像 2.4 查看 ...

  9. GO学习-(28) Go语言操作influxDB

    Go语言操作influxDB 本文介绍了influxDB时序数据库及Go语言操作influxDB. InfluxDB是一个开源分布式时序.事件和指标数据库.使用Go语言编写,无需外部依赖.其设计目标是 ...

  10. MinkowskiEngine demo ModelNet40分类

    MinkowskiEngine demo ModelNet40分类 本文将看一个简单的演示示例,该示例训练用于分类的3D卷积神经网络.输入是稀疏张量,卷积也定义在稀疏张量上.该网络是以下体系结构的扩展 ...