在監聽鍵盤事件時，咱們常常須要檢查常見的鍵值。Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：css
1 <!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` --> 2 <input v-on:keyup.13="submit">
記住全部的 keyCode 比較困難，因此 Vue 爲最經常使用的按鍵提供了別名：html
1 <!-- 同上 --> 2 <input v-on:keyup.enter="submit"> 3 4 <!-- 縮寫語法 --> 5 <input @keyup.enter="submit">
所有的按鍵別名：vue
.enter.tab.delete (捕獲「刪除」和「退格」鍵).esc.space(空格鍵).up.down.left.right咱們也能夠自定義按鍵app
1 <html> 2 <head> 3 <title>Vue按鍵修飾符</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 </style> 7 </head> 8 <body> 9 <div id="example"> 10 <ul> 11 <li v-for="item in items"> 12 {{ item.name }} 13 </li> 14 </ul> 15 <button @keyup.f1="del()">刪除</button> 16 </div> 17 <script> 18 Vue.config.keyCodes.f1 = 112; 19 new Vue({ 20 el:"#example", 21 data:{ 22 items:[ 23 {name:"Hello"}, 24 {name:"world"}, 25 {name:"喜歡"}, 26 {name:"happy"} 27 ] 28 }, 29 methods:{ 30 del(){ 31 this.items.pop(); 32 } 33 } 34 }) 35 </script>
甚至能夠這樣添加多個this
1 Vue.config.keyCodes = ｛ 2 f1:112,
// 能夠添加多個 3 ............ 4 ............ 5 ............ 6 7 8 ｝