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


Posted in Javascript onMarch 23, 2018

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

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

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

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自定义过滤器格式化数字三位加一逗号实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
JavaScript 五大常见函数
Mar 23 #Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 #Javascript
剖析Angular Component的源码示例
Mar 23 #Javascript
vue利用axios来完成数据的交互
Mar 23 #Javascript
JS动画定时器知识总结
Mar 23 #Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 #Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 #Javascript
You might like
php相当简单的分页类
2008/10/02 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
PHP多进程编程实例详解
2017/07/19 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
潜说js对象和数组
2011/05/25 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
浅析return false的正确使用
2013/11/04 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
python抽象基类用法实例分析
2015/06/04 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Django REST framework内置路由用法
2019/07/26 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python numpy数组中的复制知识解析
2020/02/03 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
phpquery中文手册
2021/03/18 PHP
儿科护理实习自我鉴定
2013/09/19 职场文书
电大物流学生的自我评价
2013/10/25 职场文书
护理专业自荐信
2013/12/03 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
学生检讨书范文
2014/10/30 职场文书
指导老师鉴定意见
2015/06/05 职场文书
电工实训心得体会
2016/01/14 职场文书