vue 数字变星号 过滤器_Vue自定义过滤器格式化数字三位加一逗号实现代码

前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数(如1,587.23)仍要三位一断。有些话也不必多说，既然要求如此，实现呗。

作为前端主流框架之一的vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为保留整数的太简单了)。

vue数字过滤器逢三一断

说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的

{{num|numformat}}

vue.filter('numformat', 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.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;

}

})

var app = new vue({

el: "#app",

data: {

num: 0

},

})

总结

以上所述是小编给大家介绍的vue自定义过滤器格式化数字三位加一逗号实现代码，希望对大家有所帮助

希望与广大网友互动？？

点此进行留言吧！