这篇文章主要介绍了vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下
前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。
作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为保留整数的太简单了)。
nbsp;html>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 }, })
登录后复制
立即学习“前端免费学习笔记（深入）”；
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用对象封装ajax重复调用的方法
基于iframe实现ajax跨域请求 获取网页中ajax数据
Ajax发送和接收请求
立即学习“前端免费学习笔记（深入）”；
以上就是Vue自定义过滤器格式化数字三位加一逗号实现代码的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2756153.html
