16 - filter 过滤器

一、入门

1、filter 介绍

1、 有时需要 例如 一些数据格式（$ 20.00）、最大值（一些逻辑处理后，返回想要的格式或者数据）；可以使用 filter 。
2、VUE 中的过滤器不能替代Vue中的methods、computed或者watch
3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
4、过滤器好处，尽可能保持API响应的干净、在前端处理数据格式。
5、在Vue 2.0 已经无内置的过滤器了，可自定义过滤器。

2、filter 参数

1、可使用到两个地方

{{money|moneyFilter(2,'元')}}

2、filter 管道 传参

tempure : 过滤器中传递的值 或者表达式 （obj、arr 等）；
a：参数 1 ；
b：参数 2 

我是过滤器
{{tempure | filterFn1(a,b) | filterFn2(a,b)}}

二、全局使用

1、在main.js 中 定义：

1、moneyFilter：过滤器名称
2、函数中的参数解析：
value：通过管道传来的数据
num：调用过滤器时在圆括号中第一个参数
type：调用过滤器时在圆括号中第二个参数

Vue.filter("moneyFilter", function(value, num, type) {
  //value是使用过滤器是的表达式或者值,num和tyep中的参数
  return "￥" + value.toFixed(num) + type;
});

2、在 需要的地方引用

{{20 | moneyFilter(2,'元')}}            // 20:00 元

三、局部（组件内）使用

  filters:{
    moneyFilter: function(value, num, type) {
     return "￥" + value.toFixed(num) + type;
    },
  },

在 需要的地方引用

{{20 | moneyFilter(2,'元')}}            // 20:00 元

四、文件定义全局过滤器

1、 自定义函数（filterfun.js）中：

//金额格式过滤器
let moneyFilter = (value, num, type) => {
 return "￥" + value.toFixed(num) + type;
};

ecport default {
  moneyFilter, 
}

2、在 main.js 中引入 ：
import * as filterfun from "../static/js/filterfun";
3、注册自定义过滤器

Object.keys(filterfun ).forEach(key => {
  Vue.filter(key, filterfun[key]);
});

参考文献：https://www.cnblogs.com/xuqp/p/9395269.html
多种过滤器：https://github.com/wy-ei/vue-filter