Верхний индекс результатов.toFixed()

Question

В моем шаблоне Vue.js у меня есть строка шаблона для расчета общей суммы. Я использовал метод.toFixed() для отображения десятичных дробей. Десятичные дроби должны отображаться в верхнем индексе.

Как я могу надписать часть.toFixed(2) моей строки шаблона ниже?

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

Таким образом, общая сумма должна отображаться как, например, 180,50 вместо 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>