Vue.js教程
1.9.5 按键修饰符
阅读(

Vue.js 基础

Vue.js 安装

Vue.js 介绍

Vue.js 实例

Vue.js 模板语法

Vue.js 计算属性和侦听器

Vue.js Class 与 Style 绑定

Vue.js 条件渲染

Vue.js 列表渲染

Vue.js 事件处理

事件修饰符

内联在处理器中的方法

事件处理方法

监听事件

按键修饰符

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

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的keyCode比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名:

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

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

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

自动匹配按键修饰符

2.5.0 新增:

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

<input @keyup.page-down="onPageDown">

在上面的例子中,处理函数仅在$event.key === 'PageDown'时被调用。

有一些按键 (.esc以及所有的方向键) 在 IE9 中有不同的key值, 如果你想支持 IE9,它们的内置别名应该是首选。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验