vue全局过滤器封装

时间:2019-01-11
本文章向大家介绍vue全局过滤器封装,主要包括vue全局过滤器封装使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

再写cue项目时,所用的过滤器很多时,把所有的过滤器方法封装在一个文件中,然后导出。
1.我的项目路径如下

2.index.js里面的代码

//vue定义全局过滤器
let 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;
    }
}

let timeFilter = function(value){
    return value+"22"
}
export { MoneyFormat,timeFilter }

3.main.js里面添加

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

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