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.效果