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