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

作者:狐狸家的鱼

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

GitHub:sueRimn

一、过滤器filter

1.定义

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

2.注册

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

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

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

1.单价局部注册过滤器

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

cart.js

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

cart.html

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

2.总价全局注册过滤器

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

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

cart.js

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

cart.html

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

cart.js全部代码:

Vue.filter('money',(value,type) => {//全局过滤器 总价
return value.toFixed(2) + type;//保留两位小数
});
new Vue({
el:'#app',
data: {
totalMoney: 0,//总金额
productList: [],//商品列表 },
filters: {//局部过滤器 单价
formatMoney: function (value) {
return "¥ " + value.toFixed(2);//保留两位小数
}
},
mounted: function() {//挂载 钩子 实例插入文档
this.cartView();
},
methods: {
cartView: function() {
let _this = this;
//获取数据,返回结果
this.$http.get("../data/cartData.json", {"id":123}).then(res => {//不必在外部声明 this
this.productList = res.data.result.list;
this.totalMoney = res.data.totalMoney;
});
}
},
});

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. nodejs+express+mongodb写api接口的简单尝试

    1:启动mongodb服务 我的mongoDB的安装目录:E:\mongoDB\bin,版本:3.4.9 打开cmd  -> e:(进入e盘) -> cd mongoDB/bin(进入mo ...

  2. C#1到C#4使用委托的几种方式

    using System; namespace DelegateDemo { class Program { private delegate int Cacu(string str); static ...

  3. C# List集合去重使用lambda表达式

    name age sex Lucy 22 woman Lily 23 woman Tom 24 man Lucy 22 woman Lily 23 woman LiLei 25 man List< ...

  4. 【iOS开发】Alamofire框架的使用一基本用法

    Alamofire框架的使用一 —— 基本用法 对于使用Objective-C的开发者,一定非常熟悉AFNetworking这个网络框架.在苹果推出的Swift之后,AFNetworking的作者专门 ...

  5. Linux中输入输出重定向的问题

      Linux 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设备就是终端,即显示器. 输出重定向:命令的输出不 ...

  6. 局部敏感哈希(LSH)之simhash和minhash

    minhash 1. 把文档A分词形成分词向量L 2. 使用K个hash函数,然后每个hash将L里面的分词分别进行hash,然后得到K个被hash过的集合 3. 分别得到K个集合中的最小hash,然 ...

  7. 被低估的.net(上) - 微软MonkeyFest 2018广州分享会活动回顾

    前天, 2018年11月10日, 广州图书馆\微软云开发者社区\广东职业教育信息化研究会\珠三角技术沙龙在广州图书馆负一层1号报告厅搞了一场”微软最有价值专家(MVP)广州分享会 - MonkeyFe ...

  8. Python基础之面对对象进阶

    阅读目录 isinstance和issubclass 反射 setattr delattr getattr hasattr __str__和__repr__ __del__ item系列 __geti ...

  9. Log4j配置文件详解及实例

     1 ) . 配置根 Logger ,其语法为:   log4j.rootLogger = [ level ] , appenderName, appenderName, … 其中, level 是日 ...

  10. 【Teradata】变更viewpoint web登录地址

    1.使用root用户登录原viewpoint地址 ssh root@192.168.253.133 2.查看使用网卡(示例中为eth0) route Kernel IP routing table D ...