一憔恳、入門
1瓤荔、filter 介紹
1、 有時(shí)需要 例如 一些數(shù)據(jù)格式（$ 20.00）钥组、最大值（一些邏輯處理后输硝，返回想要的格式或者數(shù)據(jù)）；可以使用 filter 程梦。
2点把、VUE 中的過(guò)濾器不能替代Vue中的methods、computed或者watch
3屿附、過(guò)濾器不改變真正的data愉粤，而只是改變渲染的結(jié)果，并返回過(guò)濾后的版本拿撩。
4、過(guò)濾器好處如蚜，盡可能保持API響應(yīng)的干凈压恒、在前端處理數(shù)據(jù)格式。
5错邦、在Vue 2.0 已經(jīng)無(wú)內(nèi)置的過(guò)濾器了探赫，可自定義過(guò)濾器。
2撬呢、filter 參數(shù)
1伦吠、可使用到兩個(gè)地方
<!-- 花括號(hào)中使用 -->
<div>{{money|moneyFilter(2,'元')}}</div>
<!-- v-bind 中使用 -->
<div v-bind:id="id | capitalize"></div>
2、filter 管道 傳參
tempure : 過(guò)濾器中傳遞的值 或者表達(dá)式 （obj魂拦、arr 等）毛仪；
a：參數(shù) 1 ；
b：參數(shù) 2
<div :id=" tempure | filterFn(a,b)">我是過(guò)濾器</div>
<div>{{tempure | filterFn1(a,b) | filterFn2(a,b)}}</div>
二芯勘、全局使用
1箱靴、在main.js 中 定義：
1、moneyFilter：過(guò)濾器名稱
2荷愕、函數(shù)中的參數(shù)解析：
value：通過(guò)管道傳來(lái)的數(shù)據(jù)
num：調(diào)用過(guò)濾器時(shí)在圓括號(hào)中第一個(gè)參數(shù)
type：調(diào)用過(guò)濾器時(shí)在圓括號(hào)中第二個(gè)參數(shù)
Vue.filter("moneyFilter", function(value, num, type) {
//value是使用過(guò)濾器是的表達(dá)式或者值,num和tyep中的參數(shù)
return "￥" + value.toFixed(num) + type;
});
2衡怀、在 需要的地方引用
{{20 | moneyFilter(2,'元')}} // 20:00 元
三棍矛、局部（組件內(nèi)）使用
filters:{
moneyFilter: function(value, num, type) {
return "￥" + value.toFixed(num) + type;
},
},
在 需要的地方引用
{{20 | moneyFilter(2,'元')}} // 20:00 元
四、文件定義全局過(guò)濾器
1抛杨、 自定義函數(shù)（filterfun.js）中：
//金額格式過(guò)濾器
let moneyFilter = (value, num, type) => {
return "￥" + value.toFixed(num) + type;
};
ecport default {
moneyFilter,
}
2够委、在 main.js 中引入 ：
import * as filterfun from "../static/js/filterfun";
3、注冊(cè)自定義過(guò)濾器
Object.keys(filterfun ).forEach(key => {
Vue.filter(key, filterfun[key]);
});
參考文獻(xiàn)：https://www.cnblogs.com/xuqp/p/9395269.html
多種過(guò)濾器：https://github.com/wy-ei/vue-filter
