Vue中对数值进行保留小数点后两位的处理(两种情况)

Html部分:

合计: ¥{{totalMoney | numFilter}}

Js部分:(注意toFixed方法只能用于数值型数据)

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

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

// 情况二:保留小数点后两位的过滤器,尾数不四舍五入(此处存在一个问题,当源数据小数点第三位为数字9,并且第四位会导致第三位进位的情况下,得到的最终数据仍然不是截取 eg: 3.1798 截取两位会变成3.18)

filters: {
  numFilter (value) {
    let realVal = ''
    if (!isNaN(value) && value!== '') {
      // 截取当前数据到小数点后三位
      let tempVal = parseFloat(value).toFixed(3)
      realVal = tempVal.substring(0, tempVal.length - 1)
    } else {
      realVal = '--'
    }
    return realVal
  }
}

  // 情况二:优化成如下方式,自行封装成一个公共函数,即用即调 

filters: {
  numFilter (value) {
    cutOutNum(value) 
  }
}

-----  将此函数封装在外部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)