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 ｝