vue.js 按鍵修飾符
阿新 • • 發佈:2019-02-10
在監聽鍵盤事件時,我們經常需要檢查常見的鍵值。Vue 允許為 v-on
在監聽鍵盤事件時新增按鍵修飾符:
//在輸入框按下回車鍵時呼叫方法
<input type="text" v-on:keyup.13="logname" value="name" >
//在輸入框按下Shift鍵時呼叫方法
<input type="text" v-on:keyup.16="logage" value="age" >
但這樣很麻煩,所以 vue.js提供了按鍵別名
一部分的按鍵別名(具體看官方API)
.enter //回車鍵
.tab //tab鍵
.delete
//“刪除”和“退格”鍵.esc //Esc鍵
.space //空格鍵
.up //
↑鍵.down //
↓鍵.left //
←鍵.right
//→鍵
示例:
//當從另一個地方 按下 Tab鍵 跳到此處時觸發事件 <input type="text" v-on:keyup.tab="logname" value="name" >
可以通過全域性
config.keyCodes
物件自定義按鍵修飾符別名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
可以組合使用按鍵別名:
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>