当前位置： 首页 > news >正文

Vue-10、Vue键盘事件

news 2026/3/27 16:15:03

1、vue中常见的按键别名
在这里插入图片描述
回车 ---------enter

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}</style>
</head>
<body>
<div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",data:{name:'北京大学',},methods:{showInfo(e){console.log(e.target.value)}}})
</script>
</body>
</html>

在这里插入图片描述
删除---------delete

在这里插入图片描述

退出---------esc
在这里插入图片描述
空格---------space
在这里插入图片描述
换行---------tab（特殊，必须配合keydown使用）
在这里插入图片描述

上---------up
在这里插入图片描述

下---------down
在这里插入图片描述

左---------left
在这里插入图片描述

右---------right

在这里插入图片描述
键盘上任意按键名称及编码查看

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",methods:{showInfo(e){console.log(e.key,e.keyCode)}}})
</script>
</body>
</html>

在这里插入图片描述
注意 :

1、系统修饰键（用法特殊）：ctrl、alt、shift、meta 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 配合keyup使用正常触发事件。

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

如转换大小写的按键

在这里插入图片描述

在这里插入图片描述
使用keyCode去制定具体的按键（不推荐）
在这里插入图片描述
Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
<script type="text/javascript">Vue.config.productionTip=false;Vue.config.keyCodes.huiche = 13; //定义了一个别名按键new Vue({el:"#root",methods:{showInfo(e){console.log(e.key,e.keyCode)}}})
</script>
</body>
</html>

在这里插入图片描述
ctrl + y 一起按的时候才触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
</div>
<script type="text/javascript">Vue.config.productionTip=false;new Vue({el:"#root",methods:{showInfo(e){console.log(e.key,e.keyCode)}}})
</script>
</body>
</html>

在这里插入图片描述

相关文章：

Vue-10、Vue键盘事件

1、vue中常见的按键别名 回车 ---------enter <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>键盘事件</title><!--引入vue--><script type"text/javascript" src"h…...

编程日记 2024/1/10 10:59:44

胡圆圆的暑期实习经验分享

背景 实验室一般是在研究生二年级的时候会放实习&#xff0c;在以后的日子就是自己完成毕业工作要求&#xff0c;基本上不再涉及实验室的活了&#xff0c;目前是一月份也是开始准备暑期实习的好时间。实验室每年这个时候都会有学长学姐组织暑期实习经验分享&#xff0c;本着不…...

编程日记 2024/1/10 10:56:42

基于uniapp封装的table组件

数据格式 tableData: [{elcInfo: [{tableData:[1,293021.1,293021.1,293021.1,293021.1,]}]},{elcInfo: [{tableData:[1,293021.1,293021.1,293021.1,293021.1,]}]},{elcInfo: [{tableData:[1,293021.1,293021.1,293021.1,293021.1,]}]},/* {title: "2",elcInfo: [{…...

编程日记 2024/1/10 10:51:37

Git删除远程仓库某次提交记录后的所有提交

1、鼠标右键->git bash here&#xff0c;然后cd切换到代码目录&#xff1b; 2、git log查看提交记录&#xff0c;获取commit id 3、git reset commit id&#xff08;commit id指要保留的最新的提交记录id&#xff09; 4、git push --force&#xff0c;强制push 如果出现…...

编程日记 2024/1/10 10:47:34

强化学习10——免模型控制Q-learning算法

Q-learning算法 主要思路 由于 V π ( s ) ∑ a ∈ A π ( a ∣ s ) Q π ( s , a ) V_\pi(s)\sum_{a\in A}\pi(a\mid s)Q_\pi(s,a) Vπ​(s)∑a∈A​π(a∣s)Qπ​(s,a) &#xff0c;当我们直接预测动作价值函数&#xff0c;在决策中选择Q值最大即动作价值最大的动作&…...

编程日记 2024/1/10 10:45:32

【数据库】CRUD常用函数UNION 和 UNION ALL

文章目录 一、CRUD二、函数2.1 字符函数 (Character Functions):2.2 数字函数 (Numeric Functions):2.3 日期函数 (Date Functions):2.4 流程控制函数:2.5 聚合函数: 三、UNION 和 UNION ALL3.1 UNION&#xff1a;3.2 UNION ALL3.3 注意事项 一、CRUD CRUD 是指数据库操作的四…...

编程日记 2024/1/10 10:44:31

Adding Conditional Control to Text-to-Image Diffusion Models——【论文笔记】

本文发表于ICCV2023 论文地址&#xff1a;ICCV 2023 Open Access Repository (thecvf.com) 官方实现代码&#xff1a;lllyasviel/ControlNet: Let us control diffusion models! (github.com) Abstract 论文提出了一种神经网络架构ControlNet,可以将空间条件控制添加到大型…...

编程日记 2024/1/10 10:41:27

Python与人工智能

Python 是一种广泛用于人工智能&#xff08;AI&#xff09;开发的编程语言。Python具有简洁的语法和强大的库支持&#xff0c;使其成为数据科学、机器学习和深度学习的理想选择。 Python中有许多库可以帮助实现人工智能&#xff0c;其中最流行的包括TensorFlow和PyTorch。这些…...

编程日记 2024/1/10 10:39:26

【Docker】Docker基础

文章目录 安装使用帮助启动命令镜像命令容器命令 安装 # 卸载旧版本 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine # 设置存储库 sudo yum install -y yum-utils …...

编程日记 2024/1/10 10:38:25

linux异常情况，排查处理中

登录客户环境后&#xff0c;发现一个奇怪情况如下图&#xff0c;之前也遇到过&#xff0c;直接fuser -ck /backup操作的话&#xff0c;主机将会重启&#xff0c;因数据库运行中&#xff0c;等待停机维护时间&#xff0c;同时也在想办法不重启的情况下解决该问题 [rootdb ~]# f…...

编程日记 2024/1/10 10:35:21

Spring Boot参数校验方案

NotNull&#xff1a;值不能为null&#xff1b;NotEmpty&#xff1a;字符串、集合或数组的值不能为空&#xff0c;即长度大于0&#xff1b;NotBlank&#xff1a;字符串的值不能为空白&#xff0c;即不能只包含空格&#xff1b;Size&#xff1a;字符串、集合或数组的大小是否在指…...

编程日记 2024/1/10 10:29:16

【漏洞复现】ActiveMQ反序列化漏洞(CVE-2015-5254)

Nx01 产品简介 Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件。ActiveMQ是消息队列服务&#xff0c;是面向消息中间件&#xff08;MOM&#xff09;的最终实现&#xff0c;它为企业消息传递提供高可用、出色性能、可扩展、稳定和安全保障。 Nx02 漏洞描述 Re…...

编程日记 2024/1/10 10:25:12

面试题：MySQL误删表数据，如何快速恢复丢失的数据？

相信后端研发的同学在开发过程经常会遇到产品临时修改线上数据的需求&#xff0c;如果手法很稳那么很庆幸可以很快完成任务&#xff0c;很不幸某一天突然手一抖把表里的数据修改错误或者误删了&#xff0c;这个时候你会发现各种问题反馈接踵而来。 如果身边有BDA或者有这方面经…...

编程日记 2024/1/10 10:24:10

李沐之神经网络基础

目录 1.模型构造 1.1层和块 1.2自定义块 1.3顺序块 1.4在前向传播函数中执行代码 2.参数管理 2.1参数访问 2.2参数初始化 3.自定义层 3.1不带参数的层 3.2带参数的层 4.读写文件 4.1加载和保存张量 4.2加载和保存模型参数 1.模型构造 1.1层和块 import torch fr…...

编程日记 2024/1/10 10:23:10

【docker】使用 Dockerfile 构建镜像

一、什么是Dockerfile Dockerfile 是用于构建 Docker 镜像的文本文件。它包含了一系列的指令&#xff0c;用于描述如何构建镜像的步骤和配置。 通过编写 Dockerfile&#xff0c;您可以定义镜像的基础环境、安装软件包、复制文件、设置环境变量等操作。Dockerfile 提供了一种可…...

编程日记 2024/1/10 10:22:09

计算机网络—— 概述

概述 1.1 因特网概述 网络、互联网和因特网 网络由若干结点和连接这些结点的链路组成多个网络还可以通过路由器互联起来&#xff0c;这样就构成了一个覆盖范围更大的网络&#xff0c;即互联网&#xff08;或互连网&#xff09;。因特网&#xff08;Internet&#xff09;是世…...

编程日记 2024/1/10 10:18:05

“超人练习法”系列06：如何更好地掌握技能？

01 掌握的阶段 关于人类学习新事物的最生动、最精妙的比喻&#xff0c;我是从笑来老师那里学到的。 他指出&#xff0c;学习新知识、新概念犹如在构建自己大脑皮层&#xff0c;每个习得的概念就像是大脑皮层上的一个个微小神经元。 一个看似聪明、博学的人&#xff0c;总能在各…...

编程日记 2024/1/10 10:14:01

【华为OD机试真题2023CD卷 JAVAJS】字符串拼接

华为OD2023（C&D卷）机试题库全覆盖，刷题指南点这里 字符串拼接 知识点数组递归 时间限制：1s 空间限制：256MB 限定语言：不限 题目描述： 给定M(0<M<=30)个字符（a-z），从中取出任意字符（每个字符只能用一次）拼接成长度为N(0<N<=5)的字符串，要求相同的字…...

编程日记 2024/1/10 10:13:00

【算法】链表-20240109

这里写目录标题 一、141. 环形链表二、876. 链表的中间结点三、面试题 02.01. 移除重复节点 一、141. 环形链表 简单 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中…...

编程日记 2024/1/10 10:11:59

机器学习系列--R语言随机森林进行生存分析（2）

随机森林&#xff08;Breiman 2001a&#xff09;&#xff08;RF&#xff09;是一种非参数统计方法&#xff0c;需要没有关于响应的协变关系的分布假设。RF是一种强大的、非线性的技术&#xff0c;通过拟合一组树来稳定预测精度模型估计。随机生存森林&#xff08;RSF&#xff0…...

编程日记 2024/1/10 10:08:56

20吨燃气蒸汽锅炉实力厂家/支持上门安装调试

燃气蒸汽锅炉&#xff0c;认准源头实力厂家&#xff0c;不仅能买到品质过硬的设备&#xff0c;更能享受到省心便捷的上门安装调试服务&#xff0c;免去自行安装的繁琐与隐患&#xff0c;让设备快速投入平稳运行。我们作为深耕锅炉制造行业的实力厂家&#xff0c;具备正规生产资…...

编程新知 2026/3/27 15:08:51

用了Qoder写代码飞快，联调时却总因字段不一致返工，问题出在哪？

发版前夜&#xff0c;前端字段对不上后端接口&#xff0c;联调卡了整晚。这种场景在 AI Coding 普及后并不罕见&#xff0c;不少团队用了 Qoder 觉得生成快、跑通快&#xff0c;可一旦要改需求&#xff0c;系统就僵住了。看似工具背锅&#xff0c;其实根子往往不在速度&#xf…...

编程新知 2026/3/27 14:34:32

MedGemma Medical Vision LabGPU优化：FP16量化+KV Cache压缩使A10显存占用降低42%

MedGemma Medical Vision Lab GPU优化&#xff1a;FP16量化KV Cache压缩使A10显存占用降低42% 1. 项目背景与挑战 MedGemma Medical Vision Lab 是一个基于 Google MedGemma-1.5-4B 多模态大模型构建的医学影像智能分析 Web 系统。这个系统通过 Web 界面实现医学影像与自然语…...

编程新知 2026/3/27 14:16:09

自动化周报生成：OpenClaw+GLM-4.7-Flash整合多平台数据

自动化周报生成&#xff1a;OpenClawGLM-4.7-Flash整合多平台数据 1. 为什么需要自动化周报 每周五下午&#xff0c;我的心情总是特别复杂。一方面期待着周末的到来&#xff0c;另一方面又要面对那个令人头疼的任务——写周报。相信很多技术从业者都有类似的经历&#xff1a;…...

编程新知 2026/3/27 14:01:16

资源捕获高效解决方案：猫抓浏览器扩展让媒体提取更简单

资源捕获高效解决方案&#xff1a;猫抓浏览器扩展让媒体提取更简单 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在当今数字时代&#xff0c;我们每天都在网页上浏览大量的媒体内容&#xff0c;从精…...

编程新知 2026/3/27 12:36:48

Java后端开发——真实面试汇总（持续更新）

一.浙江大学研究院一面&#xff08;面试Time&#xff1a;1小时30分钟&#xff09;1. 面试官自我介绍&#xff0c;同时我开始自我介绍2. 平时接触到哪些数据结构&#xff1f;3. ArrayList和LinkedList的主要区别是什么&#xff1f;4. 数组和链表的主要区别是什么&#xff1f;5.…...

编程新知 2026/3/27 12:16:27

探索 Carsim 与 Simulink 联合实现三车队列 PID 控制

队列控制 carsim联合simulink pid控制 实现3辆车的队列控制&#xff0c;跟随头车车速变化&#xff0c;保合理车距。在自动驾驶和车辆动力学研究领域&#xff0c;实现多车队列控制&#xff0c;使其能跟随头车车速变化并保持合理车距&#xff0c;是一项极具挑战性但又十分关键的任…...

编程新知 2026/3/27 11:58:20

3步搞定黑苹果配置：OpCore-Simplify自动化EFI构建终极指南

3步搞定黑苹果配置&#xff1a;OpCore-Simplify自动化EFI构建终极指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的黑苹果配置头疼吗&…...

编程新知 2026/3/27 11:40:05

SAP资产会计数据迁移：除了AS91，你还需要检查这些关键配置（传输日期、抵销科目详解）

SAP资产会计数据迁移&#xff1a;AS91之外的7个关键配置陷阱与解决方案 当你在凌晨三点盯着屏幕上不平的资产折旧凭证时&#xff0c;AS91的简单操作指南显然已经不够用了。作为经历过数十个SAP上线项目的顾问&#xff0c;我发现90%的资产数据迁移问题都源于那些容易被忽略的后台…...

编程新知 2026/3/27 10:37:47

Spring Boot项目实战：5步搞定sa-token与OAuth2.0的无缝整合（附完整代码）

Spring Boot项目实战&#xff1a;5步搞定sa-token与OAuth2.0的无缝整合&#xff08;附完整代码&#xff09; 在当今微服务架构盛行的时代&#xff0c;认证授权已成为系统设计中不可或缺的一环。对于Java开发者而言&#xff0c;如何在保持代码简洁的同时实现强大的权限控制&…...

编程新知 2026/3/27 10:33:46