ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue千分位分隔符 和 千分位分隔符保留两位小数

2021-03-16 18:33:21  阅读:1001  来源: 互联网

标签:Vue number prec 千分 let 分隔符 toFixed Math


1.千分位分割符

建一个js文件,例如 filter.js

export const formatMoney = (number, decimals = 0, decPoint = '.', thousandsSep = ',') => {
  number = (number + "").replace(/[^0-9+-Ee.]/g, "")
  let n = !isFinite(+number) ? 0 : +number
  let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  let sep = (typeof thousandsSep === "undefined") ? "," : thousandsSep
  let dec = (typeof decPoint === "undefined") ? "." : decPoint
  let s = ""
  let toFixedFix = function (n, prec) {
    let k = Math.pow(10, prec)
    return "" + Math.ceil(n * k) / k
  }
  s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".")
  let re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, "$1" + sep + "$2")
  }
  if ((s[1] || "").length < prec) {
    s[1] = s[1] || ""
    s[1] += new Array(prec - s[1].length + 1).join("0")
  }
  return s.join(dec)
}

在Vue文件中可直接引用

util只是文件夹

import { formatMoney } from '@/util/filters';
filters: { formatMoney},

 

2.千位分隔符+保留两位小数

  • 主要是正则验证 
  • 不好的一点是每个需要一次,写一次
  • 因为toFixed( 2 ) 不是函数,所以在Vue中用toFixed( 2 )时,要用number,即Number( ).toFixed( 2 )

 

 <el-table-column
        align="center"
        label="订单金额"
        prop="ord_amount"
        style="width: 10%"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope" align="center">
          ${{
            Number(scope.row.ord_amount)
              .toFixed(2)
              .toString()
              .replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, "$1,")
          }}
        </template>
      </el-table-column>

 

标签:Vue,number,prec,千分,let,分隔符,toFixed,Math
来源: https://www.cnblogs.com/sunqiaozhen/p/14545153.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有