vue快速入门(十五)监听键盘事件

注释很详细,直接上代码

上一篇

新增内容

  1. 特定按键监听事件
  2. 全按键监听事件及两种判断方法
    源码
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root"> 
    <!-- 第一种情况是可以使用几个常见的名称来监视对应按键 -->
    <input type="text" v-model="username" @keyup.enter="clickBtn_1">
    <!-- 第二种情况是可以使用键码来监视对应按键 -->
    <input type="text" v-model="password" @keyup.65="clickBtn_2">
    <!-- 当然也可以在方法里面再判断不同按键的情况 -->
    <input type="text" v-model="age" @keyup="clickBtn_3">
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        username:'',
        password:'',
        age:''
      },
      methods: {// 方法
        clickBtn_1(){
          console.log(this.username);
        }
        ,
        clickBtn_2(){
          console.log(this.password);
        }
        ,
        clickBtn_3(e){
          // 有两种判断方式,第一种是判断按键名称,第二种是判断按键码
          //注意此处的e.key和e.keyCode的区别
          // 键码对应表可参考:https://www.cnblogs.com/lynallylsx/articles/14480181.html
          if(e.key === 'Enter'){
            console.log('enter');
          }else if(e.keyCode === 65){
            console.log('a');
          }
        }
      }
    })
  </script>
</body>
</html>

效果演示


下一篇

相关推荐
雪碧聊技术27 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了2 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v2 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue2 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂2 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js