Bagaimana untuk menukar jumlah mata wang kepada sen dalam VueJS?

Question

Saya mahu dapat menukar nilai mata wang yang kelihatan seperti $5 atau $5.12 dengan selamat kepada nilai dalam sen, iaitu 500 dan 512 masing-masing.

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>

Saya perasan bahawa nilai seperti "5.10" mungkin tidak ditukar sepenuhnya kepada nilai dalam sen.

Saya juga ingin mengelakkan orang memasukkan nilai seperti 5.1 dan 5.12345 kerana ia sebenarnya bukan mata wang. Mata sepatutnya dalam dua digit, bukan?

Sila berikan sebarang petua untuk mengelakkan kesilapan yang merugikan.

Answer 1

Pertama, anda boleh gunakan Math.rounduntuk membundarkan pecahan kepada nombor bulat terdekat

Selain itu, untuk mengesan jika nilai yang dimasukkan melebihi 2 tempat perpuluhan, anda boleh memantau nilai dan menyemak

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>