Vue中如何使用filter 過濾器

一、入門

filter 介紹

1、 有時需要 例如 一些數據格式（$ 20.00）、最大值（一些邏輯處理后，返回想要的格式或者數據）；可以使用 filter 。
2、VUE 中的過濾器不能替代Vue中的methods、computed或者watch
3、過濾器不改變真正的data，而只是改變渲染的結果，並返回過濾后的版本。
4、過濾器好處，盡可能保持API響應的干凈、在前端處理數據格式。
5、在Vue 2.0 已經無內置的過濾器了，可自定義過濾器。

filter 參數

1、可使用到兩個地方

<!-- 花括號中使用 -->
<div>{{money|moneyFilter(2,'元')}}</div>

<!-- v-bind 中使用 -->
<div :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>

二、全局使用

在main.js 中 定義

1、moneyFilter：過濾器名稱
2、函數中的參數解析：
value：通過管道傳來的數據
num：調用過濾器時在圓括號中第一個參數
type：調用過濾器時在圓括號中第二個參數

Vue.filter("moneyFilter", function(value, num, type) {
  //value是使用過濾器是的表達式或者值,num和tyep中的參數
  return "￥" + value.toFixed(num) + type;
});

在 需要的地方引用

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

三、局部（組件內）使用

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

在 需要的地方引用

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

文件定義全局過濾器

自定義函數（filterfun.js）中

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

ecport default {
  moneyFilter, 
}

在 main.js 中引入

import * as filterfun from "./filters";
3、注冊自定義過濾器

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