<template>
<div class="index-compont">
<div class="totalCount">{{num | NumFormat}}<span>元</span></div>
</div>
</template>
<script>
data(){
return {
    num: 876543.00
}
},
filters: {
NumFormat: function (value) {
if(!value) return '0.00'
value = value.toFixed(2)
var intPart = Math.trunc(value)// 获取整数部分
      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
}
}
}
</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. DLL混淆

  2. 使用POI操作Excel时new XSSFWorkbook ()报错java.lang.NoSuchMethodError解决方式

    使用最新的POI3.11时,在执行 Workbook  workBook = new XSSFWorkbook ();这段代码时出现错误: java.lang.NoSuchMethodError: j ...

  3. swift语言初见

    下面是swift得基础语法部分内容 //  main.swift //  helloSwift // //  Created by cyteven on 14-7-23. //  Copyright ...

  4. GridView根据一列自动计算(转载)

    <%@ Page Language="C#" %> <%@ Import Namespace="System.Xml" %> <! ...

  5. 【bzoj3224】Tyvj 1728 普通平衡树

    交了一发pb_ds #include<ext/pb_ds/assoc_container.hpp> #include<algorithm> #include<iostre ...

  6. EJB3.0

    由于EJB2.0的复杂性,在Spring和Hibernate[1]  等轻量级框架出现后,大量的用户转向应用轻量级框架.在大家的呼声中, EJB 期待已久的EJB3.0规范终于发布了.在本文中将对新的 ...

  7. mac下破解apk文件以及apktool的相关使用

    Android apktool是一个用来处理APK文件的工具,可以对APK进行反编译生成程序的源代码和图片.XML配置.语言资源等文件,也可以添加新的功能到APK文件中.用该工具来汉化Android软 ...

  8. RK3288以太网的mac地址调试笔记【学习笔记】【原创】

    平台信息:内核:linux3.1.0系统:android/android6.0平台:RK3288 作者:庄泽彬(欢迎转载,请注明作者) 邮箱:2760715357@qq.com 说明:提供以太网mac ...

  9. UVA11183 Teen Girl Squad —— 最小树形图

    题目链接:https://vjudge.net/problem/UVA-11183 You are part of a group of n teenage girls armed with cell ...

  10. 贪吃蛇 javaScript 谷歌浏览器浏览

    1.代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...