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 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
js 实现验证码输入框示例详解
Sep 23 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python实现excel转sqlite的方法
2017/07/17 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
土木工程毕业生推荐信
2013/10/28 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
护理专业自我鉴定
2014/01/30 职场文书
党员志愿者活动方案
2014/08/28 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
通知函格式范文
2015/04/27 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
感恩主题班会教案
2015/08/12 职场文书