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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
openlayers实现地图测距测面
Sep 25 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实现paypal整合方法
2010/11/28 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
python脚本替换指定行实现步骤
2017/07/11 Python
Python学习入门之区块链详解
2017/07/25 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
财务出纳岗位职责
2014/02/03 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
处级干部考察材料
2014/12/24 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android