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

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

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

  1.  <!-- 同上 -->
  2.  <input v-on:keyup.enter="submit">
  3.  
  4.  <!-- 缩写语法 -->
  5.  <input @keyup.enter="submit">

全部的按键别名：

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

我们也可以自定义按键

  1.  <html>
  2.    <head>
  3.      <title>Vue按键修饰符</title>
  4.      <script src="vue.js"></script>
  5.      <style type="text/css">
  6.      </style>
  7.    </head>
  8.    <body>
  9.     <div id="example">
  10.        <ul>
  11.          <li v-for="item in items">
  12.            {{ item.name }}
  13.          </li>
  14.        </ul>
  15.        <button @keyup.f1="del()">删除</button>
  16.     </div>
  17.     <script>
  18.       Vue.config.keyCodes.f1 = 112;
  19.       new Vue({
  20.         el:"#example",
  21.         data:{
  22.           items:[
  23.             {name:"Hello"},
  24.             {name:"world"},
  25.             {name:"喜欢"},
  26.             {name:"happy"}
  27.           ]
  28.         },
  29.         methods:{
  30.           del(){
  31.              this.items.pop();
  32.           }
  33.         }
  34.       })
  35.     </script>

甚至可以这样添加多个

  1.  Vue.config.keyCodes = ｛
  2.      f1:112,
         // 可以添加多个
  3.     ............
  4.     ............
  5.     ............
  6.  
  7.  ｝

Vue--按键修饰符（逐个学习按键修饰符）的更多相关文章

  1. Vue--事件处理（逐个学习事件修饰符）

    .capture .self .once 主要学习这三个事件修饰符的用法先来看看capture capture即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则 ...

  2. Vue.js-03：第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  3. 有关static静态修饰符的学习心得

    初学java,面对着这个static修饰符,愣是琢磨了两天时间,还在今天琢磨透了,现在将悟到的东西记录下来: 1.static修饰符表示静态修饰符,其所修饰的内容(变量.方法.代码块暂时学到这三种)统 ...

  4. vue--键盘修饰符以及自定义键盘修饰符

    键盘修饰符以及自定义键盘修饰符 1.vue键盘修饰符[了解即可] ​地址:https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4 ...

  5. 对于形式参数只能用final修饰符，其它任何修饰符都会引起编译器错误

    在Java中修饰符总共有一下几种: 1.访问控制修饰符    分别有:public private protected,缺省 2.其它修饰符      分别有:abstract,final,stati ...

  6. Java从入门到放弃——05.修饰符static,final,权限修饰符

    本文目标 static final: 权限修饰符:public,private,protected,缺省 1.static 静态修饰符,被static修饰的变量或者方法会被加载进静态区内存,不需要创建 ...

  7. 初学总结--------Java修饰符与修饰关键字（且叫修饰关键字）

    Java中有类,有成员变量,有成员方法,有局部变量.他们分别能用什么来修饰? 目前学习到的类,有普通类和内部类. 一.修饰普通类: 1.public  每个文件中只有一个类能被public修饰,表示可 ...

  8. js-ES6学习笔记-修饰器

    1.修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时.这意味着,修饰器能在编译阶段运行代码. 2. function testable(target) { target.isTestable ...

  9. 接口中字段的修饰符：public static final（默认不写） 接口中方法的修饰符：public abstract（默认不写）abstract只能修饰类和方法 不能修饰字段

    abstract只能修饰类和方法 不能修饰字段

随机推荐

  1. Python3解leetcode Number of Boomerangs

    问题描述: Given n points in the plane that are all pairwise distinct, a "boomerang" is a tuple ...

  2. php array_diff()函数 语法

    php array_diff()函数 语法 作用:比较两个数组的键值,并返回差集.大理石平台价格表 语法:array_diff(array1,array2,array3...) 参数: 参数 描述 a ...

  3. springmvc上传文件异常

    症状: error:org.springframework.web.multipart.MultipartException: Current request is not a multipart r ...

  4. Android逆向之旅---解析编译之后的Dex文件格式

    一.前言 新的一年又开始了,大家是否还记得去年年末的时候,我们还有一件事没有做,那就是解析Android中编译之后的classes.dex文件格式,我们在去年的时候已经介绍了: 如何解析编译之后的xm ...

  5. TabController定义顶部tab切换

    前面通过DefaultTabController组件实现了AppBar里面的顶部导航切换,但是在项目中有数据请求,上拉加载更多等操作的时候,前面的写法,就不是很方便操作,因此,在flutter里面,还 ...

  6. [CSP-S模拟测试]:Divisors（数学）

    题目描述 给定$m$个不同的正整数$a_1,a_2,...,a_m$,请对$0$到$m$每一个$k$计算,在区间$[1,n]$里有多少正整数是$a$中恰好$k$个数的约数. 输入格式 第一行包含两个正 ...

  7. spash和selenium浅析

    Splash是什么: Splash是一个Javascript渲染服务.它是一个实现了HTTP API的轻量级浏览器,Splash是用Python实现的,同时使用Twisted和QT.Twisted(Q ...

  8. mysql_DML_select_子查询

    -------------------------------------------------------------------子查询---------------------   --1.子查 ...

  9. Fedora 的截屏功能

    写写博客少不了截图,Windows 上使用微信的快捷键 Ctrl+A 截图并且可以随意编辑是挺方便的,开始在 Linux 上还没有找到这样的软件,只找到了不支持编辑的简单截图软件. 1. 使用 Scr ...

  10. SEC7 - MySQL 查询语句--------------进阶3：排序查询

    # 进阶3:排序查询 /* 引入: select * from employees; 语法: select 查询列表 from 表 [where 筛选条件] order by 排序的列表 asc/de ...