我想要能夠安全地將看起來像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粉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>