Vue过滤格式化金额

金额格式化技巧

最新推荐文章于 2025-06-25 11:00:21 发布

weixin_33770878

最新推荐文章于 2025-06-25 11:00:21 发布

阅读量922

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2251646/blog/1491497

2019独角兽企业重金招聘Python工程师标准>>>

先创建格式化金额工具js

const digitsRE = /(\d{3})(?=\d)/g

export function currency (value, currency, decimals) {
  value = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value).toFixed(decimals)
  var _int = decimals
    ? stringified.slice(0, -1 - decimals)
    : stringified
  var i = _int.length % 3
  var head = i > 0
    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
    : ''
  var _float = decimals
    ? stringified.slice(-1 - decimals)
    : ''
  var sign = value < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

/*
 * formatMoney(value,type)
 * 功能：金额按千位逗号分割
 * 参数：value，需要格式化的金额数值.
 * 参数：type,判断格式化后的金额是否需要小数位.
 * 返回：返回格式化后的数值字符串.
 */
export function formatMoney(value, type) {
  if (/[^0-9\.]/.test(value))
    return "0";
  if (value == null || value == "")
    return "0";
  value = value.toString().replace(/^(\d*)$/, "$1.");
  value = (value + "00").replace(/(\d*\.\d\d)\d*/, "$1");
  value = value.replace(".", ",");
  var re = /(\d)(\d{3},)/;
  while (re.test(value))
    value = value.replace(re, "$1,$2");
  value = value.replace(/,(\d\d)$/, ".$1");
  if (type == 0) {// 不带小数位(默认是有小数位)
    var a = value.split(".");
    if (a[1] == "00") {
      value = a[0];
    }
  }
  return value;
}

声明过滤器两种方式（任选一种）：

1.声明局部过滤器

import {currency} from './../util/currency'

export default {
  
   filters:{
      // 过滤器名称（任何名称）： 对应过滤函数方法名称
      currency:currency
   }
}

2.声明全局过滤器

import Vue from 'vue'
import {currency} from './../util/currency'
//过滤器全局名称，对应过滤函数方法名
Vue.filter("currency",currency)

使用过滤器

<span>{{1478511 | currency('$')}}</span>
<!-- 展示结果 $1,478,511.00 -->

转载于:https://my.oschina.net/u/2251646/blog/1491497