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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
Javascript获取某个月的天数
May 30 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
gulp解决跨域的配置文件问题
2017/06/08 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Django添加sitemap的方法示例
2018/08/06 Python
详解Python用户登录接口的方法
2019/04/17 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
基于python3生成标签云代码解析
2020/02/18 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
实习自我评价怎么写
2013/12/02 职场文书
公证处委托书
2015/01/28 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
美元符号 $
2022/02/17 杂记
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js