input 回車是一個常用的功能,在 Vue 中也可以輕松實現。通過監聽 input 框的回車事件,再將輸入的內容傳遞給對應的方法進行處理,就可以實現 input 回車的功能了。
<template> <div> <input v-model="inputValue" @keyup.enter="handleSubmit"> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { handleSubmit() { // 處理輸入的內容 console.log(this.inputValue) } } } </script>
這里我們先使用 v-model 指令綁定 input 框的值到 Vue 的 data 中。然后通過監聽 @keyup.enter 事件,在用戶敲擊回車鍵時觸發 handleSubmit 方法,對輸入的內容進行處理。
上述代碼中的 methods 為組件內的方法,如果該方法需要在模板中使用,需要將其綁定到 Vue 的 methods 中。下面是一個完整的示例:
<template> <div> <input v-model="inputValue" @keyup.enter="handleSubmit"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { inputValue: '', list: [] } }, methods: { handleSubmit() { // 處理輸入的內容 this.list.push(this.inputValue) this.inputValue = '' } } } </script>
上面是一個基本的示例,演示了如何實現 input 回車功能。我們在 input 中輸入內容,按下回車后,就會將輸入的內容添加到列表中,并清空 input 框。這種實現方式還是比較常見的,可以滿足日常使用。
下一篇html 截屏代碼