vue实战记录(四)- vue实现购物车功能之过滤器的使用
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实现购物车功能之过滤器的使用的更多相关文章
- vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- vue实战记录(五)- vue实现购物车功能之商品总金额计算和单选全选删除功能
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...
- vue实战记录(六)- vue实现购物车功能之地址列表选配
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(六) GitHub:sue ...
- vue实战记录(三)- vue实现购物车功能之渲染商品列表
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue实战记录(一)- vue实现购物车功能之前提准备
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(一) GitHub:sue ...
- vue学习记录:vue引入,validator验证,数据信息,vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- Vue学习记录-初探Vue
写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...
- python UI自动化实战记录四:测试页面1-pageobject
该部分记录测试页面1-IndexPage,所有首页上的元素定位.操作.获取属性等方法都写在该类中. 1 首页类继承自BasePage 2 首页类第一部分写的是所有的定位器 3 首页类第二部分类的方法, ...
随机推荐
- nodejs+express+mongodb写api接口的简单尝试
1:启动mongodb服务 我的mongoDB的安装目录:E:\mongoDB\bin,版本:3.4.9 打开cmd -> e:(进入e盘) -> cd mongoDB/bin(进入mo ...
- C#1到C#4使用委托的几种方式
using System; namespace DelegateDemo { class Program { private delegate int Cacu(string str); static ...
- 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< ...
- 【iOS开发】Alamofire框架的使用一基本用法
Alamofire框架的使用一 —— 基本用法 对于使用Objective-C的开发者,一定非常熟悉AFNetworking这个网络框架.在苹果推出的Swift之后,AFNetworking的作者专门 ...
- Linux中输入输出重定向的问题
Linux 命令默认从标准输入设备(stdin)获取输入,将结果输出到标准输出设备(stdout)显示.一般情况下,标准输入设备就是键盘,标准输出设备就是终端,即显示器. 输出重定向:命令的输出不 ...
- 局部敏感哈希(LSH)之simhash和minhash
minhash 1. 把文档A分词形成分词向量L 2. 使用K个hash函数,然后每个hash将L里面的分词分别进行hash,然后得到K个被hash过的集合 3. 分别得到K个集合中的最小hash,然 ...
- 被低估的.net(上) - 微软MonkeyFest 2018广州分享会活动回顾
前天, 2018年11月10日, 广州图书馆\微软云开发者社区\广东职业教育信息化研究会\珠三角技术沙龙在广州图书馆负一层1号报告厅搞了一场”微软最有价值专家(MVP)广州分享会 - MonkeyFe ...
- Python基础之面对对象进阶
阅读目录 isinstance和issubclass 反射 setattr delattr getattr hasattr __str__和__repr__ __del__ item系列 __geti ...
- Log4j配置文件详解及实例
1 ) . 配置根 Logger ,其语法为: log4j.rootLogger = [ level ] , appenderName, appenderName, … 其中, level 是日 ...
- 【Teradata】变更viewpoint web登录地址
1.使用root用户登录原viewpoint地址 ssh root@192.168.253.133 2.查看使用网卡(示例中为eth0) route Kernel IP routing table D ...