在监听键盘事件时，我们经常需要检查常见的键值。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

我们也可以自定义按键

 <html>

   <head>

     <title>Vue按键修饰符</title>

     <script src="vue.js"></script>

     <style type="text/css">

     </style>

   </head>

   <body>

    <div id="example">

       <ul>

         <li v-for="item in items">

           {{ item.name }}

         </li>

       </ul>

       <button @keyup.f1="del()">删除</button>

    </div>

    <script>

      Vue.config.keyCodes.f1 = 112;

      new Vue({

        el:"#example",

        data:{

          items:[

            {name:"Hello"},

            {name:"world"},

            {name:"喜欢"},

            {name:"happy"}

          ]

        },

        methods:{

          del(){

             this.items.pop();

          }

        }

      })

    </script>

甚至可以这样添加多个

 Vue.config.keyCodes = ｛

     f1:112,
     // 可以添加多个

    ............

    ............

    ............

 ｝

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. oracle 字段信息

    oracle 修改字段的长度alter table tablename modify column_name varchar2(32)alter table tablename modify (col ...

  2. 夯实Java基础系列7：Java 代码块和执行顺序

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  3. HDU6719 Strassen（__int128）

    HDU6719 Strassen 直接照题目模拟,数据范围最大不会超过__int128. 时间复杂度为 \(O(\log n)\) . #include<bits/stdc++.h> us ...

  4. JS-闭包（Closures）和let声明块级作用域变量

    闭包: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures 闭包是函数和声明该函数的词法环境的组合. let: https ...

  5. Skyline（6.x）-Web二次开发-多窗口对比

    GitHub 上获取源码 1. 打开个 3D 窗口 一个页面加载多个 TerraExplorer3DWindow 和 SGWorld 等只有第一个能用(即使用 iframe 也是一样) 所以我决定打开 ...

  6. 知道css有个content属性吗？有什么作用？有什么应用？

    css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...

  7. TCP概述

    1. TCP提供的服务 我们知道TCP是一个面向连接.提供可靠数据数据传输服务的传输层协议.面向连接意味着发送端和接收端在交换数据前需要建立一个连接,和我们平常打电话一样,在通话前,需要拨号建立连接. ...

  8. Rust SDL2配置

    github地址 https://github.com/Rust-SDL2/rust-sdl2 clone或下载这个项目 本文使用的是MSVC版本 上面链接页面搜Windows (MSVC) 得知需要 ...

  9. 如何通过xmake进行交叉编译

    xmake 提供了方便灵活的交叉编译支持,大部分情况下,都不需要配置很复杂的toolchains前缀,例如:arm-linux- 什么的 只要这个toolchains目录满足如下结构(大部分的交叉工具 ...

  10. LayUI Table复杂表头实现

    LayUI table官方文档中在介绍复杂表头时的用例仅使用了自动渲染的方式作为参考,而并未用到方法渲染的方式来做用例,这让部分不太熟悉layUI table的开发者会有些头疼,不知道如何在方法渲染中 ...