toFixed() 模板 VueJS 中的一個大數字

Question

我顯示一個獎勵，它是一個帶 9 位小數的數字（計算時必須保持這樣）

但我只想顯示小數點后 4 位

我在 VueJS 中使用模板

<template>
<div class="mb-2">Reward: {{ myAcccount.reward.accrued.toFixed(4) * (10 ** -9) - appAcccount.reward.paid.toFixed(4) * (10 ** -9)}}</div>
  </template>

但是我不能像這樣應用 toFixed() ，你知道直接在模板中這樣做的方法嗎？

目前顯示：

獎勵：0.0022680540000000003

所以我想

獎勵：0.0022

Answer 1

toFixed()返回一個字符串而不是一個數字。 為了更好的可讀性，我也會在自己的 function 中提取邏輯

編輯：添加 Math 而不是toFixed你可以寫一個 function 將你的數字轉換成小數。

const transformNumber = (number) => {
  return Math.trunc(number * 10000)/10000;
}

就像提到的一個計算屬性：

computed: {
  reward(): {
    return transformNumber(myAcccount.reward.accrued) * (10 ** -9) - transformNumber(appAcccount.reward.paid) * (10 ** -9)
  }
}

Answer 2

您可以通過將數學部分包含在 () 中來嘗試將 .toFixed() 應用到計算的末尾。

<div class="mb-2">Reward: {{ (myAcccount.reward.accrued * (10 ** -9) - appAcccount.reward.paid * (10 ** -9)).toFixed(4)}}</div>