Vue--按鍵修飾符（逐個學習按鍵修飾符）

時間 2020-05-10

標籤 vue 按鍵修飾逐個學習简体版

原文原文鏈接

在監聽鍵盤事件時，咱們常常須要檢查常見的鍵值。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 ｝

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。