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. iOS UIToolBar的使用

    UIToolBar存在于UINavigationController导航栏控制器中.并且默认被隐藏. 当设置UIToolBar显示,或者存在UITabBarController且tabbar被隐藏的时 ...

  2. [Angular] Advanced DI

    In this post, we are going to see how to solve one design pattern challenge. The challenge is what w ...

  3. 让cocos2dx支持并通过arm64 编译

    为了要支持64位,请把这个文件直接替换到相应的lib文件夹下.本来是须要改neton_matrix_impl.c里的宏定义, 在 platform/ios/EAGLVIEW.mm中 在neon_mat ...

  4. (转)android res文件夹里面的drawable(ldpi、mdpi、hdpi、xhdpi、xxhdpi)

    android res文件夹里面的drawable(ldpi.mdpi.hdpi.xhdpi.xxhdpi) (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),F ...

  5. C - Valera and Fruits

    Problem description Valera loves his garden, where n fruit trees grow. This year he will enjoy a gre ...

  6. tomcat 启动服务器日志小结

    1.tomcat 启动服务配置: 目前主要有  ①把编译好war或者项目直接扔到webapps 目录下, 启动bin目录下的startup.bat 即可   ②  在conf目录下 修改  serve ...

  7. 关于HTTPS通信机制的笔记

    一次安全可靠的通信--HTTPS原理 转自:腾讯开放社区raphealguo文章

  8. 前端面试基础-html篇之CSS3新特性

    CSS3的新特性(个人总结)如下 过度(transiton) 动画(animation) 形状转换 transform:适用于2D或3D转换的元素 transform-origin:转换元素的位置(围 ...

  9. [hihocoder][Offer收割]编程练习赛45

    互补二元组 Xi + Xj = Yi + Yj等价于Xi - Yi + Xj - Yj = 0 ,对每个二元组计算其x与y的差,每次加上其相反数的个数. #pragma comment(linker, ...

  10. P1034 矩形覆盖

    题目描述 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n=4 时,4个点的坐标分另为:p1(1,1),p2(2,2),p3(3,6),P4(0,7),见图一. 这 ...