1. <template>
  2. <div class="index-compont">
  3. <div class="totalCount">{{num | NumFormat}}<span></span></div>
  4. </div>
  5. </template>
  6. <script>
  7. data(){
  8. return {
        num: 876543.00
  9. }
  10. },
  11. filters: {
  12. NumFormat: function (value) {
  13. if(!value) return '0.00'
  14. value = value.toFixed(2)
  15. var intPart = Math.trunc(value)// 获取整数部分
  1. var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
  2. var floatPart = '.00' // 预定义小数部分
  3. var value2Array = value.split('.')
  4. // =2表示数据有小数位
  5. if(value2Array.length === 2) {
  6. floatPart = value2Array[1].toString() // 拿到小数部分
  7. if(floatPart.length === 1) { // 补0,实际上用不着
  8. return intPartFormat + '.' + floatPart + '0'
  9. } else {
  10. return intPartFormat + '.' + floatPart
  11. }
  12. } else {
  13. return intPartFormat + floatPart
  14. }
  15. }
  16. }
  17. </script>

  

Vue自定义过滤器格式化数字三位加一逗号的更多相关文章

  1. vue 自定义过滤器 格式化金额(保留两位小数)

    1.js部分 import Vue from 'vue' Vue.filter('money', function(val) { val = val.toString().replace(/\$|\, ...

  2. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  3. vue 自定义过滤器

    vue允许自定义过滤器,被用作一些常见文本的格式化.由“管道符”指示,格式如下: <!-- 在两个大括号中 --> {{message | capitalize}}   <!-- 在 ...

  4. vue自定义过滤器的创建和使用

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  5. Vue自定义指令实现下拉加载:v-loadmore

    和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) {    var p = 0;    var t = 0;  ...

  6. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  7. 【转载】Vue自定义指令实现pc端加载更多

    转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...

  8. C# int转string 每三位加一个逗号

    ; Console.WriteLine(aaaa.ToString("N0")); Console.WriteLine()); Console.WriteLine("架构 ...

  9. js数字每3位加一个逗号

    if(typeof val ==="number"){ var str = val.toString(); ? /(\d)(?=(\d{})+\.)/g : /(\d)(?=(?: ...

随机推荐

  1. antd 离线 icon

    讲你下载下来的官方提供的字体库解压后所有文件复制到node-modules/antd/dist目录下 创建新的文件夹iconfont 在你项目生成的css入口文件对应的源码less文件开始添加如下两句 ...

  2. Binder IPC的权限控制

    PS:个人理解:当进程1通过Binder调用组件2时,会将进程1的pid及uid赋给组件2,并检测进程1的pid及uid是否有权限调用组件2.而后组件2需要调用组件3,此时组件2保存的pid及uid为 ...

  3. hdu 4902 Nice boat--2014 Multi-University Training Contest 4

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=4902 Nice boat Time Limit: 30000/15000 MS (Java/Othe ...

  4. Sublime Text 3设置吊炸天PHP开发环境

    @heiyeluren @created: 2016/5/31 @last modify: 2016/7/8 1. 下载安装Sublime Text 3 http://www.sublimetext. ...

  5. 错误 1 无法将程序集“NBear.Data.dll”复制到文件“D:\newbpm\bpm\SureBpm\Bin\NBear.Data.dll”。无法将“D:\newbpm\bpm\SureSoft.WebServiceBaseLib\bin\Debug\NBear.Data.dll”添加到网站。 无法添加文件“Bin\NBear.Data.dll”。 拒绝访问。 D:\..

    错误 1 无法将程序集“NBear.Data.dll”复制到文件“D:\newbpm\bpm\SureBpm\Bin\NBear.Data.dll”.无法将“D:\newbpm\bpm\SureSof ...

  6. VS2010调用外部webservice

    vs2010怎么调用web服务webservice方法,以vs2010为例.Vs的各个版本的此项功能操作基本一致. 工具/原料 vs2010 在“服务引用设置”对话框中,单击“添加 Web 引用”. ...

  7. 修改系统时间(取得服务器时间,使用SetLocalTime API函数,需要UAC权限)

    我的客户遇到系统时间不对,自己又不会改,于是想到利用服务端时间来修改本地的系统时间. 第一步,把下面xml存成uac.xml文件备用. <?xml version="1.0" ...

  8. Being a Hero (hdu 3251 最小割 好题)

    Being a Hero Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  9. bzoj1486【HNOI2009】最小圈

    1486: [HNOI2009]最小圈 Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 1778  Solved: 827 [Submit][Statu ...

  10. SAP更改日志记录表

    CDHDR  更改日志表头 CDPOS  更改日志行项目 SAP中修改频率较低的定制表(T001等)一般都会有修改记录存在,查看一个表有没有修改记录可以在SE11中查看他的技术设置,如果其中的LOG ...