1、我们工作中经常会有类似于这样的需求：按下Enter键触发某个事件、或者按下ESC退出页面等各种各样的场景。在Vue中，可以通过键盘修饰符来实现这样的场景。

2、事例代码：

<body>

    <divi id="app">

        序号：<input type="text" v-model="idValue"/>

        车名：<input type="text" v-model="nameValue" @keyup.enter="add()"/>

        <p v-for="item in list">

           序号：{{item.id }} , 车名：{{ item.name }}<br/>

        </p>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                idValue:'',

                nameValue:'',

                list:[

                    {id:1,name:'奥迪'},

                    {id:2,name:'宝马'}

                ]

            },

            methods:{

                add(){

                    this.list.unshift({

                        id : this.idValue,

                        name : this.nameValue

                    });

                }

            }

        })

    </script>

</body>

这里在车名的input框里添加keyup事件，即键盘按下抬起时触发；后面的“enter”即为按键修饰符，定义哪个按键会触发该事件。所以当光标位于该input框时，按下Enter键抬起就会触发事件执行add方法，并添加新数据展示在页面上。

3、除了enter键以外，vue还定义了以下按键修饰符：tab、delete (捕获“删除”和“退格”键)、esc、space、up、down、left、right；这些是官网提供的修饰符，但是实际进行操作的时候发现，几乎所有的键盘按键都可以用来作为修饰符，大家有空可以自己尝试一下，毕竟vue更新速度还是比较快的，真理还是要来自于实践。

4、除了使用以上方法，我们还可以使用keycode（键盘码）来作为修饰符使用。如：f2的键盘码为113，我们可以修改代码为：

车名：<input type="text" v-model="nameValue" @keyup.113="add()"/>

这时光标在input框时，我们按下再松开f2时也可以触发事件。

注：不管是使用键盘名称还是使用键盘码都要防止快捷键的冲突，快捷键冲突的时候会不起作用。

5、当然按键事件除了keup还有kedown等其他按键事件，大家有空的话可以尝试使用其他按键事件。

每天进步一点点！

Vue学习之路第十九篇：按键修饰符的使用的更多相关文章

  1. Vue学习之路第十六篇：车型列表的添加、删除与检索项目

    又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...

  2. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  3. Vue学习之路第十八篇：私有过滤器的使用

    1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...

  4. Vue学习之路第十五篇：v-if和v-show指令

    1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...

  5. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  6. FastAPI 学习之路（十九）处理错误

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  7. 学习之路三十九：新手学习 - Windows API

    来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...

  8. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  9. Vue学习之路第十篇：简单计算器的实现

    前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...

随机推荐

  1. MySQL 存储过程的异常处理

    mysql> mysql> delimiter $$ mysql> mysql> CREATE PROCEDURE myProc     ->     (p_first_ ...

  2. POJ 3905

    加深了对有向边意义的理解了.2-SAT #include <iostream> #include <cstdio> #include <cstring> #incl ...

  3. asp.net控件的异步刷新

    需求:我们知道,asp.net控件中的button控件,默认是开启了自己主动回发的,而有时候.我们不想刷新整个界面.而仅仅想局部刷新,可页面中又偏偏用到了.net button控件. 尽管我非常讨厌. ...

  4. #leetcode#Anagrames

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...

  5. 零基础学python-2.24 一些经常使用函数

    今天我举一些经常使用的函数,让大家了解一下: 函数 作用 dir([obj]) 浏览对象的属性 help([obj]) 显示对象的文档字符串 ini([obj]) 将对象转为整形 len([obj]) ...

  6. wpf datagridtemplatecolumn visibility binding

    因为datagridtemplatecolumn不在Virsual Tree中,不能继承DataGrid的DataContext, 所以想要绑定到datagridtemplatecolumn的 vis ...

  7. 国内物联网平台初探（七） ——Ablecloud物联网自助开发和大数据云平台

    平台定位 面向IoT硬件厂商,提供设备联网与管理.远程查看控制.定制化云端功能开发.海量硬件数据存储与分析等基础设施,加速硬件实现联网智能化. 架构 服务 云端服务一体化开发引擎 业内独创一体化开发引 ...

  8. PHP中数据类型转换的三种方式

    PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...

  9. 【SDOI 2008】 仪仗队

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2190 [算法] 同POJ3090 值得注意的是此题数据规模较大,建议使用用线性筛筛出 ...

  10. Node.js：Buffer

    ylbtech-Node.js:Buffer 1.返回顶部 1. Node.js Buffer(缓冲区) JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文 ...