在Vue 2.0的開發(fā)中,回車是一個非常常見的操作,有時候我們需要監(jiān)聽回車事件,在用戶敲擊回車鍵的時候執(zhí)行一些操作。下面介紹Vue 2.0中如何監(jiān)聽回車事件。
首先,我們需要在模板中的input標(biāo)簽上綁定事件,代碼如下:
<input type="text" v-model="inputValue" @keydown.enter="handleEnter" />
需要注意的是,我們綁定的是@keydown.enter事件,表示在按下回車鍵時會觸發(fā)handleEnter方法。handleEnter方法可以在methods選項中進行定義,代碼如下:
methods: {
handleEnter() {
console.log('Enter key pressed');
}
}
以上代碼會在按下回車鍵時輸出”Enter key pressed”字符串。
我們也可以在回車事件中進行表單提交等操作,如下所示:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="inputValue" @keydown.enter="handleSubmit" />
</form>
在上述代碼中,我們綁定的是@submit.prevent事件,表明在form表單中按下回車鍵時會觸發(fā)handleSubmit方法,該方法可以進行表單提交等操作,代碼如下:
methods: {
handleSubmit() {
console.log('Form submitted');
}
}
以上代碼將在表單提交時輸出”Form submitted”字符串。