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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
原生js+css实现tab切换功能
Sep 17 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP print类函数使用总结
2010/06/25 PHP
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
毕业证明模板
2015/06/19 职场文书
呐喊读书笔记
2015/06/30 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python