一、入门
1、filter 介绍
1、 有时需要 例如 一些数据格式（$ 20.00）、最大值（一些逻辑处理后，返回想要的格式或者数据）；可以使用 filter 。
2、VUE 中的过滤器不能替代Vue中的methods、computed或者watch
3、过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
4、过滤器好处，尽可能保持API响应的干净、在前端处理数据格式。
5、在Vue 2.0 已经无内置的过滤器了，可自定义过滤器。
2、filter 参数
1、可使用到两个地方
<!-- 花括号中使用 -->
<div>{{money|moneyFilter(2,'元')}}</div>
<!-- v-bind 中使用 -->
<div v-bind:id="id | capitalize"></div>
2、filter 管道 传参
tempure : 过滤器中传递的值 或者表达式 （obj、arr 等）；
a：参数 1 ；
b：参数 2
<div :id=" tempure | filterFn(a,b)">我是过滤器</div>
<div>{{tempure | filterFn1(a,b) | filterFn2(a,b)}}</div>
二、全局使用
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
