vue中的keyup事件可以通過v-on指令來綁定,這個事件會在按鍵后觸發,常用于實現搜索功能、過濾列表等。
// 綁定keyup事件 <input type="text" v-on:keyup="onKeyUp" /> // 方法實現 methods: { onKeyUp(event) { console.log(event.keyCode); } }
其中,keyup事件的事件對象中提供了keyCode屬性,表示按下的是哪個鍵。我們可以根據keyCode來實現相關功能,如下方實現的回車搜索。
// 綁定keyup.enter事件 <input type="text" v-on:keyup.enter="search" /> // 方法實現 methods: { search() { console.log('搜索'); } }
除了綁定單個鍵位事件外,還可以使用修飾符來處理多個鍵位,如下方實現的ctrl+s保存。
// 綁定鍵盤事件和ctrl+s <div v-on:keyup.ctrl.s="save">保存</div> // 方法實現 methods: { save() { console.log('保存'); } }
在vue中,keyup事件還可以通過自定義指令來實現更復雜的功能。自定義指令的具體實現方式不在這里展開,感興趣的可以參考官方文檔。
上一篇html 炫酷代碼