在VueJS中，如何将货币金额转换为分（cents）？

Question

我想要能够安全地将看起来像5或5.12美元的货币值转换为以分为单位的值，分别为500和512。

new Vue({
  el: "#app",
  data: {
    price: 5.1
  },
  computed: {
    amount() {
      return (this.price * 100);
    }
  },
})

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

  <label>总金额（格式化）<br>
<input v-model="price"></label>
  </label>

  <p>

    <label>总金额（以分为单位）{{ amount }}<br>
<input v-model.number="amount" name="amount" required type="number"></label>
</div>

我注意到像“5.10”这样的值可能无法完全转换为以分为单位的值。

我还想避免人们输入像5.1和5.12345这样的值，因为它们实际上不是货币。分应该是两位数对吧？

请给出避免昂贵错误的任何提示。

Answer 1

首先，你可以使用Math.round将分数四舍五入到最近的整数

此外，为了检测输入的值是否超过2位小数，可以监视该值并进行检查

new Vue({
  el: "#app",
  data: {
    price: 5.1
  },
  computed: {
    amount() {
      return Math.round(this.price * 100);
    }
  },
  watch: {
    price(newPrice, oldPrice) {
      if (String(newPrice).split('.')[1]?.length > 2) {
        alert('不应输入超过2位小数的数字')
        this.price = oldPrice
      }
    }
  }
})

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

  <label>总金额（格式化）<br>
<input v-model="price"></label>
  </label>

  <p>

    <label>总金额（分）{{ amount }}<br>
<input v-model.number="amount" name="amount" required type="number"></label>
</div>