vue.js-按键修饰符

亲爱的码友们，我是你们的小郭子，每天进步一点点。嘻嘻嘻，今天我们来讲一下vue.js里面的按键修饰符

                                                

我们知道，键盘的每个按键，都有相应的按键码。

如：

注：以上图片，均来自于百度。

比如，监听 Enter 键：

<div id="app">
    <input type="text" @keyup.13="submitInput">  // Enter 键对应 13
</div>

var app = new Vue({
  el: '#app',
  data: {},
  methods: {
    submitInput() {
      console.log('你按下了 enter 键')
    }
  }
})

上面代码中，点击 input 输入框，按下 Enter 键时，控制台会打印出 "你按下了 enter 键"。

但是，要将每个按键对应的键码值都背下来，显然是不划算的。去一个个查的话，也有点浪费时间，尤其是那些常用的按键。

而在 Vue 中，引入了 "按键修饰符" 。简单来说，它将一些常用的按键起了个名字，让我们无需再记忆那些枯燥的键码值。

比如：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

接下来，改写一下上面的代码：

<div id="app">
    <input type="text" @keyup.enter="submitInput">  // .13 改成了 .enter
</div>

var app = new Vue({
  el: '#app',
  data: {},
  methods: {
    submitInput() {
      console.log('你按下了 enter 键')
    }
  }
})

上面代码，与之前代码效果一致，只有在按下 Enter 键时，才会触发事件。