首頁  >  問答  >  主體

在VueJS中,如何將貨幣金額轉換為分(cents)?

我想要能夠安全地將看起來像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這樣的值,因為它們實際上不是貨幣。分應該是兩位數對吧?

請給予避免昂貴錯誤的任何提示。

P粉055726146P粉055726146226 天前461

全部回覆(1)我來回復

  • P粉573809727

    P粉5738097272024-03-29 00:37:49

    首先,你可以用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>

    回覆
    0
  • 取消回覆