当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue自定义过滤器格式化数字三位加一逗号实现代码

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

2018年04月18日  | 移动技术网IT编程  | 我要评论

尸姬玄结局,小伙把手伸进洞中 竟掏出这东西,武林风死神方便

前端处理一些金额，数字类的数据要求按照固定的格式显示，比如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自定义过滤器格式化数字三位加一逗号实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网