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>