Vue的input組件在實現價格輸入時，可以很方便地進行格式化和驗證。首先，建議使用v-model綁定輸入框的值，這樣可以實時更新輸入框的內容。接著，我們可以做以下兩個處理：

<template>
<div>
<input v-model="price">
</div>
</template>
<script>
export default {
data() {
return {
price: ''
}
},
watch: {
price(newVal) {
// 去除價格中的非數字字符
let num = newVal.replace(/[^\d.]/g, '');
// 限制小數點后只能有兩位
num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
this.price = num;
}
}
}
</script>

第一步，我們通過watch監聽輸入框的值變化。在新的值中，我們使用正則表達式去除所有非數字和小數點的字符。這樣，用戶在輸入價格時，不必擔心誤輸非法字符導致計算錯誤。

第二步，我們通過正則表達式限制小數點后只能有兩位。這樣，用戶在輸入小數時，我們可以保證計算的精度。如果輸入框的值不符合這個規則，我們會自動將輸入框的值變為符合規則的值。注意這里使用了watch，因此我們需要定義data中的price變量來進行雙向綁定。