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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
TypeScript之调用栈的实现
Dec 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 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python获取当前路径实现代码
2017/05/08 Python
python tornado使用流生成图片的例子
2019/11/18 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
java程序员面试交流
2012/11/29 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
美术教师自我鉴定
2014/02/12 职场文书
销售经理岗位职责
2015/01/31 职场文书
项目负责人岗位职责
2015/02/15 职场文书
爱心捐款活动总结
2015/05/09 职场文书
运动会宣传稿50字
2015/07/23 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
我的收音机情缘
2022/04/05 无线电
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android