在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>