vue学习笔记（11）——键盘事件

weixin_54763080

已于 2023-02-01 14:00:30 修改

阅读量641

点赞数

分类专栏： vue学习笔记文章标签：学习 vue.js Powered by 金山文档

于 2023-02-01 13:27:47 首次发布

本文链接：https://blog.csdn.net/weixin_54763080/article/details/128832217

版权

vue学习笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

Vue中常用的按键别名：

回车：enter

删除：delete（捕获“删除”和“退格”键）

退出：esc

空格：space

换行：tab（比较特殊，只能配合keydown使用）

上：up

下：down

左：left

右：right

Vue为提供别名的按键，可以使用安检员是的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键（用法特殊）：ctrl、alt、shift、meta

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

（2）配合keydown使用：正常触发事件，按下即触发事件

也可以使用keyCode去指定具体按键（不推荐）

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

Vue.config.keyCodes.自定义键名=键码，可以去性质按键别名

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>学习</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <input type="text" placeholder="按下回车提示输入" @keyup.meta="showinfo">
</div>
 
<script type="text/javascript">
Vue.config.productionTip=false
Vue.config.keyCodes.huiche=13//定义了一个别名键
new Vue({
    el:'#root',
    data:{
        name:'尚硅谷'
    },
    methods:{
        showinfo(e){
          // if(e.keyCode!==13) return 
            console.log(e.target.value)
        }
    }
   
})
 
</script>
</body>
</html>

weixin_54763080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记（11）——键盘事件

Vue为提供别名的按键，可以使用安检员是的key值去绑定，但注意要转为kebab-case（短横线命名）（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。Vue.config.keyCodes.自定义键名=键码，可以去性质按键别名。系统修饰键（用法特殊）：ctrl、alt、shift、meta。（2）配合keydown使用：正常触发事件，按下即触发事件。换行：tab（比较特殊，只能配合keydown使用）删除：delete（捕获“删除”和“退格”键）
复制链接

扫一扫