Vue如何封裝多個全局過濾器到一個文件

在寫vue項目時，所用的過濾器很多時，把所有的過濾器方法封裝在一個文件中，然后導出，並綁定在vue實例上

1.在src下創建filters文件夾，並新建index.js文件

2. index.js里面的代碼

import moment from 'moment'
const dateFormat = (input, fmtstring) => {
    // 使用momentjs這個日期格式化類庫實現日期的格式化功能
    return moment(input).format(fmtstring);
}


const moneyFormat = value => {
    if (!value) return '0.00';
    /原來用的是Number(value).toFixed(0)，這樣取整時有問題，例如0.51取整之后為1，感謝Nils指正/
    var intPart = Math.floor(value); //獲取整數部分
    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+)/g, '1,'); //將整數部分逢三一斷
    var floatPart = ".00"; //預定義小數部分
    var value2Array = value.split(".");
    //=2表示數據有小數位
    if (value2Array.length == 2) {
        floatPart = value2Array[1].toString(); //拿到小數部分
        if (floatPart.length == 1) { //補0,實際上用不着
            return intPartFormat + "." + floatPart + '0';
        } else {
            return intPartFormat + "." + floatPart;
        }
    } else {
        return intPartFormat + floatPart;
    }
}

export {
    dateFormat,
    moneyFormat
}

3. main.js里面添加

import * as filters from './filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

4. 在.vue文件中就可以直接使用了

---

<span>（{{item.add_time | dateFormat('YYYY-MM-DD HH:MM:SS')}}）</span>