快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

在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
        
        
 
        
            
                
                    
                    
                
            
            
                
                    
                    
                
            
        
idname
{{item.id}}{{item.name}}
    
           

这个时候是这可以通过点击添加按钮去添加的

在vue中有什么按键修饰符

在原生js中有提供了 keyup 按键抬起事件,那么可以把方法中心的 add 方法绑定到 keyup 抬起事件中,看看能否达到想要的效果,因为我们是在输入完 name 之后去敲回车,所以把 keyup 事件绑定到我们的 name 文本框中

 

在vue中有什么按键修饰符

可以看到,当输入完name之后还没有敲击回车键,就已经自动添加了,这时候就需要用到按键修饰符了

                                 

当输入完成后,并且文本框还在获得焦点的同时,在敲回车的时候,才会执行add函数:

在vue中有什么按键修饰符

除了 enter 之外,Vue官网还提供了以下修饰符:

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  • .enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right


那么除了Vue提供的这些按键之外,其他按键可不可以使用呢,我们拿 f4 举个例子

在vue中有什么按键修饰符

这是Vue在2.5.0新增的自动匹配按键修饰符,但是我们一般只使用功能键去充当按键修饰符,

尽量不要使用要输入的键

感谢你能够认真阅读完这篇文章,希望小编分享的“在vue中有什么按键修饰符”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


新闻标题:在vue中有什么按键修饰符
网址分享:http://6mz.cn/article/ieespd.html

其他资讯