Vue-键盘事件

最新推荐文章于 2024-09-24 01:58:55 发布

终会为一

最新推荐文章于 2024-09-24 01:58:55 发布

阅读量493

点赞数 10

分类专栏： vue.0+vue3.0全套学习目录文章标签： vue.js

本文链接：https://blog.csdn.net/qq_73992463/article/details/134956268

版权

vue.0+vue3.0全套学习目录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

@keydown是按下键位后就会触发

@keyup是按下之后松手就会触发

一般是用keyup

console.log(e.keyCode);

查看键位的对应数值

showInfo(e){
        if(e.keyCode !== 13)return
        // console.log(e.keyCode !==13) ;
        console.log(e.target.value);
      }

在Vue中

1.vue中常见的按键的别名：

回车 =>enter

删除 =>deleta(捕获删除和退格键)

退出 =>esc

空格 =>space

换行 =>tab

上 =>up

下 =>down

左 =>left

右 =>right

2.vue未提供别名按键，可以使用按键原始的key法去绑定，但要注意转为kebab-case(短横线命名)

3.系统修饰键(用法特殊)：ctrl，alt,shift,meta

(1)配合keyup使用：按下修饰键的同时，在按下其他键位随后释放其他键，事件才会被触发

(2)配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键(不推荐)

5.Vue。config.keycode.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备一个盒子 -->
  <div id="root">
    <h2>欢迎回来{{name}}</h2>
    <input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo">
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      name:'魁拔'
    },
    methods:{
      showInfo(e){
        // if(e.keyCode !== 13)return
        // console.log(e.keyCode !==13) ;
        // console.log(e.key,e.keyCode);
        console.log(e.target.value);
      }
    }
  })
</script>

</html>
<!-- 笔记
  1.vue中常见的按键的别名：
  回车 =>enter
  删除 =>deleta(捕获 删除 和退格键)
  退出 =>esc
  空格 =>space
  换行 =>tab
  上 =>up
  下 =>down
  左 =>left
  右 =>right

  2.vue未提供别名按键，可以使用按键原始的key法去绑定，但要注意转为kebab-case(短横线命名)
  3.系统修饰键(用法特殊)：ctrl，alt,shift,meta
  (1)配合keyup使用：按下修饰键的同时，在按下其他键位随后释放其他键，事件才会被触发
  (2)配合keydown使用：正常触发事件
  4.也可以使用keyCode去指定具体的按键(不推荐)

  5.Vue。config.keycode.自定义键名 = 键码，可以去定制按键别名

-->