vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据

作者:狐狸家的鱼

本文链接:vue实战-实现购物车功能(四)

GitHub:sueRimn

一、过滤器filter

1.定义

  • Vue.js 允许自定义过滤器,可被用于一些常见的文本格式化
  • 用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
  • 添加在 JavaScript 表达式的尾部,由“管道”符号指示

2.注册

过滤器注册和组件相同有两种注册方式:全局注册和局部注册

在这里,将单价运用局部注册,总价运用全局注册进行展示:

一、购物车中过滤器的运用

1.单价局部注册过滤器

单价的数字前面有一个人民币¥,我们把它用过滤器展示,然后单击保留两位小数

cart.js

  1. filters: {//局部过滤器 单价
  2. formatMoney: function (value) {
  3. return "¥ " + value.toFixed(2);//保留两位小数
  4. }
  5. },

cart.html

  1. <div class="cart-tab-2">
  2. <!-- 商品单价 -->
  3. <div class="item-price">{{item.productPrice | formatMoney}}</div>
  4. </div>

2.总价全局注册过滤器

单价*数量=总价,我们在总价后面添加一个“元“的单位。

过滤器是 JavaScript 函数,总接收表达式的值 (之前的操作链的结果) 作为第一个参数,即money

cart.js

  1. Vue.filter('money',(value,type) => {//全局过滤器 总价
  2. return value.toFixed(2) + type;//保留两位小数
  3. });

cart.html

  1. <div class="cart-tab-4">
  2. <!-- 商品总金额=单价*数量 -->
  3. <div class="item-price-total">{{item.productPrice*item.productQuantity | money('元')}}</div>
  4. </div>

cart.js全部代码:

  1. Vue.filter('money',(value,type) => {//全局过滤器 总价
  2. return value.toFixed(2) + type;//保留两位小数
  3. });
  4. new Vue({
  5. el:'#app',
  6. data: {
  7. totalMoney: 0,//总金额
  8. productList: [],//商品列表
  9.  
  10. },
  11. filters: {//局部过滤器 单价
  12. formatMoney: function (value) {
  13. return "¥ " + value.toFixed(2);//保留两位小数
  14. }
  15. },
  16. mounted: function() {//挂载 钩子 实例插入文档
  17. this.cartView();
  18. },
  19. methods: {
  20. cartView: function() {
  21. let _this = this;
  22. //获取数据,返回结果
  23. this.$http.get("../data/cartData.json", {"id":123}).then(res => {//不必在外部声明 this
  24. this.productList = res.data.result.list;
  25. this.totalMoney = res.data.totalMoney;
  26. });
  27. }
  28. },
  29. });

3.效果

vue实战记录(四)- vue实现购物车功能之过滤器的使用的更多相关文章

  1. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

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

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

  3. vue实战记录(六)- vue实现购物车功能之地址列表选配

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

  4. vue实战记录(三)- vue实现购物车功能之渲染商品列表

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

  5. vue实战记录(二)- vue实现购物车功能之创建vue实例

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

  6. vue实战记录(一)- vue实现购物车功能之前提准备

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

  7. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  8. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...

  9. python UI自动化实战记录四:测试页面1-pageobject

    该部分记录测试页面1-IndexPage,所有首页上的元素定位.操作.获取属性等方法都写在该类中. 1 首页类继承自BasePage 2 首页类第一部分写的是所有的定位器 3 首页类第二部分类的方法, ...

随机推荐

  1. 二、IPC机制

    1.Android IPC简介 IPC是Inter-Process Communication的缩写,含义为进程间通信或者跨进程通信,是指两个进程之间进行数据交换的过程. ANR:Applicatio ...

  2. docker与虚拟机有何不同

    docker与虚拟机有何不同 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. 容器技术有 ...

  3. LeetCode算法题-Trim a Binary Search Tree(Java实现)

    这是悦乐书的第284次更新,第301篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第152题(顺位题号是669).给定二叉搜索树以及L和R的最低和最高边界,修剪树以使其所 ...

  4. 使用PlanViz进行ABAP CDS性能分析

    如管理学学者彼得·德鲁克所说:你无法管理你不能衡量的东西( If you can't measure it, you can't manage it).要对已有程序进行性能优化,首先要对它的运行状况做 ...

  5. JavaScript数据类型之null和undeined

    null null是JavaScrpt的关键字,表示一个特殊值,常用于描述"空值".对null执行typeof运算将返回字符串"object". undefin ...

  6. SQL数据库一些系统语法含义

    昨天在数据库中建立数据表的时候要求显示的添加一些系统语法规则,对于这些设置不知道都是什么含义,这次记录下来供以后学习. (1)SET ANSI_NULLS ON语句 T-SQL支持在与空值进行比较时, ...

  7. Loj #3059. 「HNOI2019」序列

    Loj #3059. 「HNOI2019」序列 给定一个长度为 \(n\) 的序列 \(A_1, \ldots , A_n\),以及 \(m\) 个操作,每个操作将一个 \(A_i\) 修改为 \(k ...

  8. 解决OrangePi 耳机孔没有声音

    遇到过插入耳机后没有声音,解决步骤如下: 打开终端TERMINAL(LUBUNTU按CTRL+ALT+T,MATE选SYSTERM ADMINSTRATION-MATER TERMINAL),SSH登 ...

  9. Linux之指令 重定向 文件覆盖>和文件追加>>

    指令>和>>区别 指令 > : 如果文件存在,将原来文件的内容覆盖:原文件不存在则创建文件,再添加信息. 指令 >>:不会覆盖原文件内容,将内容追加到文件的尾部. ...

  10. 越狱解决iphone4s外放无声音

    删除iphone中/System/Library/PrivateFrameworks/IAP.framework/Support/目录下的iapd文件 进入/SYSTEM/Library/Launch ...