Vue自定义过滤器格式化数字三位加一逗号实现代码
2018-03-23 10:45
891 查看
前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断。有些话也不必多说,既然要求如此,实现呗。
作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了。我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个。话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Vue数字过滤器逢三一断</title> </head> <body> <div id="app"> <h4>说明:这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4> <input type="number" v-model="num" /> <p>{{num|NumFormat}}</p> </div> </body> <script type="text/javascript" src="vue.js"></script> <script> 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 }, }) </script> </html>
总结
以上所述是小编给大家介绍的Vue自定义过滤器格式化数字三位加一逗号实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Vue自定义过滤器格式化数字三位加一逗号
- js金额数字格式化实现代码(三位加逗号处理保留两位置小数)
- js金额数字格式化实现代码(三位加逗号处理保留两位置小数)
- php实现数字格式化,数字每三位加逗号的功能函数
- js金额数字格式化实现代码(加减逗号处理)
- Vue-Cli中自定义过滤器的实现代码
- js金额数字格式化实现代码(加减逗号处理)
- vue中Element-ui 输入银行账号每四位加一个空格的实现代码
- vue实现自定义过滤器之时间格式自定义
- java如何给数字每三位加一个逗号?
- Android自定义View实现带数字的进度条实例代码
- js数字每个三位加一个逗号
- 为什么在一串数字中每三位加一个逗号
- vue数字类型过滤器的示例代码
- Android 仿微信自定义数字键盘的实现代码
- 数字格式化,从右往左每隔三位加逗号(利用递归)
- js为数字添加逗号并格式化数字的代码
- qt4下实现自定义槽---点击按钮数字加一
- js实现数字每三位加逗号的方法
- js 格式化钱数,三位加一逗号