vue 保留两位小数_牛奔的博客-程序员秘密

前言

有时候我们需要对各种数值进行保留位数，以便于更好的展示。

Html部分

template中这样使用，需要处理的字段名，再加上过滤器方法

<div class="text primary-text">
  <span>合计：</span>
  <span class="money">￥{
    {totalMoney | numFilter}}</span>
</div>

情况一：保留小数点后两位的过滤器，尾数四舍五入

filters: {
  numFilter (value) {
    // 截取当前数据到小数点后两位
    let realVal = parseFloat(value).toFixed(2)
    return realVal
  }
}

情况二：保留小数点后两位的过滤器，尾数不四舍五入

当截取当前数据到小数点后四位，小数点第三位为数字9时，第四位会导致第三位进位的情况下，最终得到的数据不是截取 eg: 3.1798而是会截取两位变成3.18，代码已做优化处理。

首先在src目录下建立js文件，如：decimals.js,加入如下代码

/**
 * 对源数据截取decimals位小数，不进行四舍五入
 * @param {*} num 源数据
 * @param {*} decimals 保留的小数位数
 */
export const cutOutNum = (num, decimals) => {
  if (isNaN(num) || (!num && num !== 0)) {
    return '--'
  }
  // 默认为保留的小数点后两位
  let dec = decimals ? decimals : 2
  let tempNum = Number(num)
  let pointIndex = String(tempNum).indexOf('.') + 1 // 获取小数点的位置 + 1
  let pointCount = pointIndex ? String(tempNum).length - pointIndex : 0 // 获取小数点后的个数(需要保证有小数位)
  // 源数据为整数或者小数点后面小于decimals位的作补零处理
  if (pointIndex === 0 || pointCount <= dec) {
    let tempNumA = tempNum
    if (pointIndex === 0) {
      tempNumA = `${tempNumA}.`
      for (let index = 0; index < dec - pointCount; index++) {
        tempNumA = `${tempNumA}0`
      }
    } else {
      for (let index = 0; index < dec - pointCount; index++) {
        tempNumA = `${tempNumA}0`
      }
    }
    return tempNumA
  }
  let realVal = ''
  // 截取当前数据到小数点后decimals位
  realVal = `${String(tempNum).split('.')[0]}.${String(tempNum)
    .split('.')[1]
    .substring(0, dec)}`
  // 判断截取之后数据的数值是否为0
  if (realVal == 0) {
    realVal = 0
  }
  return realVal
}

在你需要使用的vue文件中，引入

import { cutOutNum } from '@/utils/decimals'

在过滤器中使用

filters: {
   cutOutNums(num) {
      return cutOutNum(num, 5)
    },
  },

原文链接：https://blog.csdn.net/qq_42127308/article/details/80388398