Vue中的input數字可以為開發人員提供更好的用戶體驗，使用戶輸入更易于理解和操作。可以說，數字輸入框是我們經常會用到的一種表單元素。

Vue官方提供了兩種方式來實現數字輸入框，分別為v-model和v-bind。

<template>
<div>
<label>商品數量:</label>
<input v-model="productNum">
</div>
<div>
<label>商品價格:</label>
<input :value="productPrice" @input="updatePrice($event)">
</div>
</template>
<script>
export default {
data() {
return {
productNum: 1,
productPrice: 10
}
},
methods: {
updatePrice(event) {
this.productPrice = event.target.value.replace(/[^\d.]/g, '')
}
}
}
</script>

上述代碼中，我們分別使用了v-model和v-bind指令來實現數字輸入框的功能。v-model可以雙向綁定數據，當用戶輸入時可以自動更新數據；v-bind可以將data中的屬性值與input的value屬性綁定，通過時間監聽器來更新數據。

需要注意的是，當用戶輸入時，需要對用戶輸入的內容進行過濾和驗證。在代碼中，我們通過正則表達式將非數字和小數點的字符過濾掉，來確保用戶輸入的是數字。