按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

  1. <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
  2. <input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

  1. <input v-on:keyup.page-down="onPageDown">

在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。

内置按键码

Vue 提供了绝大多数常用的按键码的别名

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

使用按键码别名可以做到兼容:
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,这些内置的别名应该是首选。

按键修饰符

自定义修饰符

  • 查看键盘事件对应的键码
  1. window.onkeyup = (e)=>{console.log(e.keyCode)}
  • 这样子也可以使用,但是不方便
  1. <input type="text" placeholder="按下F2" @keyup.113="total++" />
  • 自定义键盘修饰符的方式
  1. 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名:
  1. Vue.config.keyCodes.f2 = 113;
  1. 使用自定义的按键修饰符:
  1. <input type="text" v-model="name" @keyup.f2="total++">

更多相关文章

  1. 其他空间类的引用,别名引用,自动加载类,数据库的简单操作
  2. 【Vue框架学习】Vue常用指令、事件修饰符、按键修饰符、计算属性
  3. Vue自学之路9-vue模版语法(事件修饰符&按键修饰符)
  4. 佳能iC MF4712怎么使用按键【扫描到计算机】
  5. MySQL系列-DML语句之select单表查询
  6. SQL基础知识V2——AS别名
  7. php学习笔记(类的别名引入与命名冲突的解决方案),数据库常用操作命
  8. 第11章 0223-命名空间2与数据库基础1,学习心得、笔记(命名空间引
  9. PHP命名空间类三种引用|类导入命名冲突解决|自动加载类|mysql操

随机推荐

  1. Android 节点进度条
  2. 谈谈Android Activity的生命周期管理
  3. This Android SDK requires Android Deve
  4. Android开发便签2:Activity的生命周期
  5. android知识点积累
  6. android中的滚动条ScrollView
  7. Android引导页面去除白屏
  8. ClipboardManager android剪切板使用
  9. Android之复选框对话框
  10. android 使用Okhttp封装上传JSON格式数据