input事件是Vue的一個(gè)很重要的事件類型。當(dāng)用戶在表單控件中輸入數(shù)據(jù)時(shí)，輸入事件就會(huì)被觸發(fā)。Vue的input事件可以讓我們實(shí)現(xiàn)實(shí)時(shí)更新數(shù)據(jù)的需求，同時(shí)也可以自定義輸入數(shù)據(jù)進(jìn)行一些處理。

下面是一個(gè)簡(jiǎn)單的例子，我們來(lái)實(shí)現(xiàn)一個(gè)實(shí)時(shí)顯示用戶輸入內(nèi)容的功能。假設(shè)我們有一個(gè)輸入框，使用v-model綁定了一個(gè)名為“message”的變量：

<div id="app">
<input v-model="message" @input="showMessage">
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
showMessage: function(event) {
console.log(event.target.value);
}
}
});
</script>

當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，輸入事件就會(huì)被觸發(fā)，showMessage方法會(huì)被調(diào)用。在showMessage方法中，我們通過(guò)event.target.value獲取到用戶輸入的內(nèi)容，然后通過(guò)console.log輸出。

除了獲取用戶輸入內(nèi)容，Vue的input事件還可以對(duì)輸入內(nèi)容進(jìn)行一些處理。下面我們來(lái)看一個(gè)例子，實(shí)現(xiàn)一個(gè)只允許輸入數(shù)字的輸入框。

<div id="app">
<input type="text" v-model.number="message" @input="onlyNumber">
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
onlyNumber: function() {
this.message = this.message.replace(/[^\d]/g, '');
}
}
});
</script>

在這個(gè)例子中，我們使用了v-model.number將message變量綁定到一個(gè)數(shù)字類型，然后在onlyNumber方法中，我們使用正則表達(dá)式將非數(shù)字字符替換為空字符串，保留下了只有數(shù)字的字符。