vue.js 按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
 

 //在输入框按下回车键时调用方法
<input type="text" v-on:keyup.13="logname" value="name" >
 //在输入框按下Shift键时调用方法
<input type="text" v-on:keyup.16="logage" value="age"  >

但这样很麻烦，所以 vue.js提供了按键别名

一部分的按键别名(具体看官方API)

• .enter           //回车键
• .tab            //tab键
• .delete                                   //“删除”和“退格”键
• .esc            //Esc键
• .space           //空格键
• .up            //↑键
• .down           //↓键
• .left           //←键
• .right                                   //→键

示例：
       

//当从另一个地方 按下 Tab键 跳到此处时触发事件
<input type="text" v-on:keyup.tab="logname" value="name" > 

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

可以组合使用按键别名：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 

 

 

如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈