vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

 更新时间:2018年08月25日 14:33:40   作者:MisterKay  
今天小编就为大家分享一篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:

<input v-on:keyup.13="submit">

vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~

上面代码,还可以在这样写:

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">

全部的键盘别名:

.enter

.tab

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

.esc

.space

.up

.down

.left

.right

还有一些组合按键:

.ctrl

.alt

.shift

.meta(window系统下是window键,mac下是command键)

Alt + C :

<input @keyup.alt.67="doSth">

Ctrl + Click :

<div @click.ctrl="doSth">点我</div>

注意!!!如果用了封装组件的话,比如element,这个时候使用按键修饰符需要加上.native

比如:

<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>

以上这篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 用VueJS写一个Chrome浏览器插件的实现方法

    用VueJS写一个Chrome浏览器插件的实现方法

    这篇文章主要介绍了用VueJS写一个Chrome浏览器插件的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue子组件中使用window.onresize()只执行一次问题

    vue子组件中使用window.onresize()只执行一次问题

    这篇文章主要介绍了vue子组件中使用window.onresize()只执行一次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue2.0全局组件之pdf详解

    vue2.0全局组件之pdf详解

    这篇文章主要为大家详细绍了vue2.0全局组件之pdf的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解VSCode配置启动Vue项目

    详解VSCode配置启动Vue项目

    这篇文章主要介绍了VSCode配置启动Vue项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue项目打包发布到Nginx后无法访问后端接口的解决办法

    vue项目打包发布到Nginx后无法访问后端接口的解决办法

    这篇文章主要给大家介绍了关于vue项目打包发布到Nginx后无法访问后端接口的解决办法,记录一下项目需要注意的地方,方便以后快速使用,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 在Vue2中注册全局组件的两种方法详解

    在Vue2中注册全局组件的两种方法详解

    这篇文章主要介绍了在Vue2中注册全局组件的两种方法,非常的细致,需要的朋友可以参考下
    2022-07-07
  • Vue自定义指令介绍(2)

    Vue自定义指令介绍(2)

    这篇文章主要为大家详细介绍了Vue自定义指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 浅谈vue项目,访问路径#号的问题

    浅谈vue项目,访问路径#号的问题

    这篇文章主要介绍了浅谈vue项目,访问路径#号的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue中的@blur事件 当元素失去焦点时所触发的事件问题

    Vue中的@blur事件 当元素失去焦点时所触发的事件问题

    这篇文章主要介绍了Vue中的@blur事件 当元素失去焦点时所触发的事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3中Teleport的用法小结

    Vue3中Teleport的用法小结

    Teleport是一个内置组件,它可以将一个组件内部的一部分模板传送到该组件的 DOM 结构外层的位置去,本文主要介绍了Vue3中Teleport用法小结,感兴趣的可以了解一下
    2025-04-04

最新评论