博主信息
 一纸荒凉* Armani
博文
118
粉丝
4
评论
5
访问量
39093
积分:0
P豆:302
博文分类
html3篇
CSS11篇
JavaScript16篇
jQuery2篇
Vue11篇
PHP20篇
ThinkPHP32篇
React0篇
other4篇
Laravel17篇
小程序5篇

05-Vue_键盘修饰符

2021年05月06日 11:02:11阅读数:181博客 /  一纸荒凉* Armani/ Vue

按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。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++">

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 在java中,static是一个,用于类的成员方法、类的成员变量,另外可以编写static代码块来优化程序性能;被static关的方法或者变量不需要依赖于对象来进行访问,只要类被加载了
    java中定义接口的方法是:接口通常以interface关字来声明。接口在Java语言中是一个抽象类型,是抽象方法的集合。
    PHP常量和变量的区别:1、变量没有定义的关字或函数,在赋值的时候被定义,而常量必须使用“define()”函数来定义;2、变量名前需要使用美元号“$”,而常量名则不需要。