Vue中的回車,常用于表單中的提交操作或輸入內容后的搜索操作。Vue提供了v-on指令,用于綁定事件監聽器。
<input v-on:keyup.enter="submit" />
上述代碼中的v-on:keyup.enter表示監聽鍵盤的keyup事件,如果按下了enter鍵,則執行submit方法。可以直接在methods選項里定義submit方法。
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
submit() {
console.log(this.message);
}
}
})
在input標簽中,使用v-model指令可以雙向綁定數據。當用戶按下enter鍵時,會自動將input的值保存到data中的message屬性中,并執行submit方法,輸出message的值。
<input v-model="message" v-on:keyup.enter="submit" />
當然,如果不需要自動保存輸入的內容,可以只監聽enter事件,不使用v-model指令。
<input v-on:keyup.enter="search" />
上述代碼中的search方法可以發送搜索請求,獲取到相應的搜索結果。
上一篇vue js中使用vue
下一篇c json 名 值