javascript - 上标 .toFixed() 的结果

Question

在我的 Vue.js 模板中，我有一个模板字符串来计算总量。我使用 .toFixed() 方法来显示小数。小数点应以上标显示。

如何在下面的模板字符串的 .toFixed(2) 部分上标？

{{ Number.isInteger(calculation.total) ? (calculation.total + '.-') : 
calculation.total.toFixed(2) }}

因此总金额应显示为例如 180. ⁵⁰而不是 180.50。

更新：感谢您让我知道 .sup() 已弃用。如何在没有弃用方法的情况下实现模板字符串中的上标？我已经改写了这个问题。

Answer 1

您可以使用可重用组件来处理其单独范围内的所有格式化逻辑。

const Price = {
  template: '<span>{{ int }}.<sup>{{ fraction }}</sup></span>',
  props: {
    value: {
    type: Number,
      required: true,
    },
  },
  computed: {
    int() { return Math.floor(this.value); },
    fraction() {
      const i = this.int, v = this.value
      return v === i
        ? '-'
        : Math.round((Math.abs(v) - Math.abs(i)) * 1e2)
    },
  },
}


new Vue({
  el: "#app",
  components: {
    Price,
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <Price :value="40.3253" />
</div>