1. 程式人生 > >vue.js 按鍵修飾符

vue.js 按鍵修飾符

在監聽鍵盤事件時,我們經常需要檢查常見的鍵值。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>