Vue中提供了input事件,可以在輸入框中輸入內容時觸發這個事件,實現對輸入框內容的實時監控。
<div id="app">
<input v-model="message" @input="inputHandler">
</div>
在這個例子中,v-model綁定了一個message屬性,實現了輸入和數據的雙向綁定,即實時更新輸入框中的內容和message變量中的值。@input事件監聽了輸入框的輸入操作,觸發inputHandler方法。下面是方法的實現:
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
inputHandler: function () {
console.log(this.message);
}
}
})
這個方法中,可以通過this.message獲取輸入框中的內容。在實際應用中,可以根據這個輸入內容做出相應的邏輯處理。例如,可以將輸入框中的內容傳遞給接口進行驗證,或進行文本格式校驗等。