Wie rechnet man den Währungsbetrag in VueJS in Cent um?

Question

Ich möchte einen Währungswert, der wie 5 $ oder 5,12 $ aussieht, sicher in einen Wert in Cent umrechnen können, der 500 bzw. 512 beträgt.

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>

Mir ist aufgefallen, dass ein Wert wie „5,10“ möglicherweise nicht vollständig in einen Cent-Wert umgerechnet werden kann.

Ich möchte auch vermeiden, dass Leute Werte wie 5,1 und 5,12345 eingeben, da es sich dabei eigentlich nicht um Währungen handelt. Die Punkte sollten zweistellig sein, oder?

Bitte geben Sie Tipps, um kostspielige Fehler zu vermeiden.

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>