这次给大家带来vue做出人名币金额过滤器，vue做出人名币金额过滤器的注意事项有哪些，下面就是实战案例，一起来看一下。
前端处理一些金额，数字类的数据要求按照固定的格式显示，比如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> <p id="app"> <h4>说明：这个版本是针对保留两位小数的浮点数进行过滤格式化的</h4> <input type="number" v-model="num" /> <p>{{num|numformat}}</p> </p> </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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何使用android与html混合开发
angularjs做出控制器相互通信功能详解
以上就是vue做出人名币金额过滤器的详细内容。