Vue学习之路第十九篇：按键修饰符的使用
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学习之路第十九篇：按键修饰符的使用的更多相关文章
- Vue学习之路第十六篇：车型列表的添加、删除与检索项目
又到了大家最喜欢的项目练习阶段,学以致用,今天我们要用前几篇的学习内容实现列表的添加与删除. 学前准备: ①:JavaScript中的splice(index,i)方法:从已知数组的index下标开始 ...
- Vue学习之路第十二篇：为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue学习之路第十八篇：私有过滤器的使用
1.上篇已经介绍了全局过滤器的使用,“全局”顾名思义就是一次定义处处使用,可以被一个页面里不同的Vue对象所使用,如下代码所示: <body> <div id="app1& ...
- Vue学习之路第十五篇：v-if和v-show指令
1.v-if和v-show都是用来实现条件判断的指令. 2.先看代码 <body> <div id="app"> <button @click=&qu ...
- Vue学习之路第十四篇：v-for指令中key的使用注意事项
1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...
- FastAPI 学习之路（十九）处理错误
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- 学习之路三十九：新手学习 - Windows API
来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
随机推荐
- 楼控-西门子-insight使用-软件重新授权
在insight的使用中,可能会碰到insight的软件授权失败,此时需要重新将原授权删除,再重新将软件授权. 先看一下软件授权失效会出现什么: 再看看如何删除原来的密钥,再注册新的密钥.
- [bzoj1195][HNOI2006]最短母串_动态规划_状压dp
最短母串 bzoj-1195 HNOI-2006 题目大意:给一个包含n个字符串的字符集,求一个字典序最小的字符串使得字符集中所有的串都是该串的子串. 注释:$1\le n\le 12$,$1\le ...
- Android自己定义控件之轮播图控件
背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个 ...
- quick-cocos2d-x游戏开发【9】——单点触摸
quick的触摸机制,我想廖大已经在这篇文章里说的非常清楚了.我们这些小辈们就是在他的基础上完备一下,说说使用方法就能够了.嘿嘿. 在2.2.3之前的版本号(不包含2.2.3).触摸机制和廖大在那篇文 ...
- 【cl】子查询应用场景
有推荐人/没有推荐人的 recommender_id is null / is not null 谁是推荐人=他的id是别人的recommender_id=某个人的recommender_id是他的i ...
- ZOJ 3829 Known Notation（字符串处理 数学 牡丹江现场赛）
题目链接:problemId=5383">http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5383 Do you ...
- Converter实现Date类型转换
1.springmvc-config.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans ...
- 关于android中线程，进程，组件，app的理解
android系统是一座房子.有一个正常执行的公司进驻这所座子 cpu是这家公司的老板 进程是公司中的办公室,办公室不干活 线程是办公室中的员工,干活的永远是员工 一间办公室中可有多个员工,而且办公室 ...
- 【HDU 1847】 Good Luck in CET-4 Everybody!
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=1847 [算法] 我们知道,每一种状态,要么必胜,要么必败 记忆化搜索即可 [代码] #includ ...
- FastDFS介绍(非原创)
文章大纲 一.FastDFS介绍二.FastDFS安装与启动(Linux系统)三.Java客户端上传图片四.参考文章 一.FastDFS介绍 1. 什么是FastDFS FastDFS是用C语言编 ...