Comment convertir le montant en devise en cents dans VueJS ?

Question

Je souhaite pouvoir convertir en toute sécurité une valeur monétaire qui ressemble à 5 $ ou 5,12 $ en une valeur en cents, qui est respectivement de 500 et 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>

J'ai remarqué qu'une valeur telle que « 5,10 » peut ne pas être entièrement convertie en une valeur en cents.

Je veux également éviter que les gens saisissent des valeurs comme 5,1 et 5,12345 car ce ne sont pas réellement des devises. Les points devraient être à deux chiffres, non ?

Veuillez donner des conseils pour éviter des erreurs coûteuses.

Answer 1

Tout d'abord, vous pouvez utiliser Math.roundpour arrondir les fractions au nombre entier le plus proche

De plus, afin de détecter si la valeur saisie dépasse 2 décimales, vous pouvez surveillerla valeur et la vérifier

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>