vue指令-按键修饰符

最新推荐文章于 2024-05-22 16:40:45 发布

佐杰

最新推荐文章于 2024-05-22 16:40:45 发布

阅读量292

点赞数

分类专栏： vue分享文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/OnlyoneFrist/article/details/131969653

版权

vue分享专栏收录该内容

30 篇文章 0 订阅

订阅专栏

文章介绍了Vue中用于监听键盘事件的keyup指令，特别是使用`.enter`来监听回车键和`.esc`来监听ESC键的方法。通过在模板中绑定`@keydown.enter`和`@keydown.esc`事件，可以分别实现回车键和ESC键触发的不同功能，例如调用`enterFn`和`escFn`方法进行相应的操作。

摘要由CSDN通过智能技术生成

vue指令-按键修饰符

- 1、语法

1、语法

@keyup.enter 监测回车键
@keyup.esc -监测返回键

示例：

<template>
  <div id="app">
    <!--绑定事件按下事件 .enter回车-->
    <input type="text" @keydown.enter="enterFn">
    <!--.esc 修饰符 -取消键 -->
    <input type="text" @keydown.esc="escFn">
    
    
  </div>
  
</template>

<script>


export default {
  //定义函数
  methods:{
    enterFn(){
      console.log("用户按下了回车")
    },
    escFn(){
      console.log("用户按下了esc键")
    }
    
  }
  
}
</script>