在vue中有什么按键修饰符
这篇文章主要介绍了在vue中有什么按键修饰符,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联是一家专注网站建设、网络营销策划、小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十年以来,已经为千余家混凝土搅拌罐车各业的企业公司提供互联网服务。现在,服务的千余家客户与我们一路同行,见证我们的成长;未来,我们一起分享成功的喜悦。
vue中的按键修饰符有:1、“.enter”,可捕获enter键;2、“.tab”,可捕获tab键;3、“.delete”,可捕获“删除”和“退格”按键;4、“.esc”,可捕获取消键;5、“.space”,可捕获空格键;6、“.up”等。
本教程操作环境:windows10系统、vue2.9.6版,DELL G3电脑。
在监听键盘事件时,我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符,用于监听按键事件
这里列出所有的按键修饰符别名:
.enter => // enter键 .tab => // tab键 .delete (捕获“删除”和“退格”按键) => // 删除键 .esc => // 取消键 .space => // 空格键 .up => // 上 .down => // 下 .left => // 左 .right => // 右
在我们平常登录功能的操作中,输入密码后会按下回车进行登录,这样就不需要在操作鼠标点击登录按钮了,那么这一功能在vue中是怎么实现的呢
我们做一个简单的添加数据功能,来演示这个案例:
id name {{item.id}} {{item.name}}
这个时候是这可以通过点击添加按钮去添加的
在原生js中有提供了 keyup 按键抬起事件,那么可以把方法中心的 add 方法绑定到 keyup 抬起事件中,看看能否达到想要的效果,因为我们是在输入完 name 之后去敲回车,所以把 keyup 事件绑定到我们的 name 文本框中
可以看到,当输入完name之后还没有敲击回车键,就已经自动添加了,这时候就需要用到按键修饰符了
当输入完成后,并且文本框还在获得焦点的同时,在敲回车的时候,才会执行add函数:
除了 enter 之外,Vue官网还提供了以下修饰符:
为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
那么除了Vue提供的这些按键之外,其他按键可不可以使用呢,我们拿 f4 举个例子
这是Vue在2.5.0新增的自动匹配按键修饰符,但是我们一般只使用功能键去充当按键修饰符,
尽量不要使用要输入的键
感谢你能够认真阅读完这篇文章,希望小编分享的“在vue中有什么按键修饰符”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
新闻名称:在vue中有什么按键修饰符
路径分享:http://scyanting.com/article/ieespd.html