亲爱的码友们，我是你们的小郭子，每天进步一点点。嘻嘻嘻，今天我们来讲一下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 键时，才会触发事件。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/73282.html
