vue自定义过滤器

在main.js中自定义过滤器￥过滤器

Vue.filter('moneyFormat', function(value) {
    if(!value) return '0.00';
    var intPart = Number(value).toFixed(0); //获取整数部分
    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
    var floatPart = ".00"; //预定义小数部分
    var value2Array = value.toString().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;
    }
});

在vue的页面中引用
<label> {{ scope.row.credLeftLimit | moneyFormat }}</label>

过滤部分，简化
let val = Number(value).toFixed(2).toString().split(".");
        val[0] = val[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return val.join(".");

如果要做成公共的组件共大家使用：

1.在common的目录下定义一个 filters.js

let moneyFormat = value => {
    if (value) {
        let val = Number(value).toFixed(2).toString().split(".");
        val[0] = val[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return val.join(".");
    }else{
        return '0.00'
    }
    /*if(!value) return '0.00';
    var intPart = Number(value).toFixed(0); //获取整数部分
    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断
    var floatPart = ".00"; //预定义小数部分
    var value2Array = value.toString().split(".");
    //=2表示数据有小数位
    if(value2Array.length == 2) {
        floatPart = value2Array[1].toString(); //拿到小数部分
        return intPartFormat + "." + floatPart;
    } else {
        return intPartFormat + floatPart;
    }*/
}

export { moneyFormat }

2. 然后在main.js中引用

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

3.最后在页面中使用

<p style="color: red;">{{ basicInfos.loanBalance | moneyFormat }}</p>

猜你喜欢