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>

.toFixed（）的结果上标

1 个答案: