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

Vue-10、Vue键盘事件

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…...

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

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

基于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: [{…...

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 如果出现…...

强化学习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值最大即动作价值最大的动作&…...

【数据库】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 是指数据库操作的四…...

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,可以将空间条件控制添加到大型…...

Python与人工智能

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

【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 …...

linux异常情况,排查处理中

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

Spring Boot参数校验方案

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

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

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

面试题:MySQL误删表数据,如何快速恢复丢失的数据?

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

李沐之神经网络基础

目录 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…...

【docker】使用 Dockerfile 构建镜像

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

计算机网络—— 概述

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

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

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

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

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

【算法】链表-20240109

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

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

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

Flutter GetX 之 状态管理

上一篇文章为大家介绍了 GetX的 路由管理,让大家对GetX有了初步了解,今天为大家介绍一下GetX的 状态管理。 StatelessWidget 和 StatefulWidget 介绍 在介绍之前,先简单介绍一下 Flutter 页面的 StatelessWidget 和 StatefulWidget ,其实Flutter的本质是万物都是Widget,…...

e2studio开发磁力计LIS2MDL(1)----轮询获取磁力计数据

e2studio开发磁力计LIS2MDL.1--轮询获取磁力计数据 概述视频教学样品申请源码下载速率新建工程工程模板保存工程路径芯片配置工程模板选择时钟设置UART配置UART属性配置设置e2studio堆栈e2studio的重定向printf设置R_SCI_UART_Open()函数原型回调函数user_uart_callback ()prin…...

C++ 字符串大小写转换,替换,文件保存 方法封装

此示例程序方法已经封装好使用std::islower()函数可以检查一个字符是否是小写字母,使用std::isupper()函数可以检查一个字符是否是大写字母。 如果传入的字母是小写字母,则使用std::toupper()函数将其转换为大写字母,并输出转换后的结果。 如果输入的字母是大写字母,则使…...

计算机基础面试题 |19.精选计算机基础面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

mysql 添加用户并分配select权限

1.root用户先登录或者在可执行界面 1.1 选择mysql 点击mysql 或者在命令行 use mysql 1.2创建用户 CREATE USER username% IDENTIFIED BY password; 备注1&#xff1a;%替换为可访问数据库的ip&#xff0c;例如“127.0.0.1”“192.168.1.1”&#xff0c;使用“%”表示不限制…...

重新认识canvas,掌握必要的联结密码

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…...

Linux第21步_取消鼠标中键的复制粘贴功能

在ubuntu18.04操作系统中&#xff0c;选中文本后&#xff0c;若按下鼠标中键&#xff0c;就可以执行复制粘贴&#xff0c;相当于 CtrlshiftC 后又按了 CtrlshiftV。在Linux系统中&#xff0c;基本上都是这么配置的。在windows系统中&#xff0c;我们习惯用Ctrl-C复制&#xff0…...

数学建模-Matlab R2022a安装步骤

软件介绍 MATLAB是一款商业数学软件&#xff0c;用于算法开发、数据可视化、数据分析以及数值计算的高级技术计算语言和交互式环境&#xff0c;主要包括MATLAB和Simulink两大部分&#xff0c;可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程…...

【AI】Pytorch 系列:学习率设置

a. 有序调整:等间隔调整(Step),按需调整学习率(MultiStep),指数衰减调整(Exponential)和 余弦退火CosineAnnealing。 b. 自适应调整:自适应调整学习率 ReduceLROnPlateau。 c. 自定义调整:自定义调整学习率 LambdaLR。 #得到当前学习率 lr = next(iter(optimizer.param_gr…...

LeetCode第107题 - 二叉树的层序遍历 II

题目 解答 class Solution {List<List<Integer>> nodeLevels new LinkedList<>();public List<List<Integer>> levelOrderBottom(TreeNode root) {levelOrder(root, 0);List<List<Integer>> nodeLevels2 new LinkedList<>…...

java 常⽤的线程池模式FixedThreadPool

java 常⽤的线程池模式FixedThreadPool 线程池中的线程数量是固定的。 当提交一个新任务时&#xff0c;如果线程池中的线程都在运行&#xff0c;新任务就会被放入任务队列中等待执行。 如果线程池中的所有线程都在运行&#xff0c;且任务队列已满&#xff0c;那么线程池会创建新…...

双机调度算法

假设当前有两个处理机A、B&#xff0c;以及n个待处理的任务。第i个任务在处理处理机A上处理需要的时间为ai&#xff0c;在处理机B上处理的时间为bi&#xff0c;两个处理机可以并行处理任务&#xff0c;但单个处理机不能同时执行任务。要求给定n个任务及各个任务对应的ai 、bi&a…...

精进单元测试技能——Pytest断言的艺术

本篇文章主要是阐述Pytest在断言方面的应用。让大家能够了解和掌握Pytest针对断言设计了多种功能以适应在不同测试场景上使用。 了解断言的基础 在Pytest中&#xff0c;断言是通过 assert 语句来实现的。简单的断言通常用于验证预期值和实际值是否相等&#xff0c;例如&#xf…...

探索人工智能:深度学习、人工智能安全和人工智能

深度学习是人工智能的一种重要技术&#xff0c;它模拟了人类大脑神经网络的工作原理&#xff0c;通过建立多层次的神经元网络来实现对数据的分析和处理。这种技术的引入使得人工智能的发展进入到了一个新的阶段。 现如今&#xff0c;深度学习在各个领域都有着广泛的应用。例如…...

CHS_02.1.4+操作系统体系结构 二

CHS_02.1.4操作系统体系结构 二 操作系统的结构 上篇文章我们只介绍过宏内核 也就是大内核以及微内核分层结构的操作系统模块化是一种很经典的程序设计思想宏内核和微内核外核 操作系统的结构 上篇文章我们只介绍过宏内核 也就是大内核以及微内核 今年大纲又增加了分层结构 模块…...

【python可视化大屏】使用python实现可拖拽数据可视化大屏

介绍&#xff1a; 我在前几期分享了关于爬取weibo评论的爬虫&#xff0c;同时也分享了如何去进行数据可视化的操作。但是之前的可视化都是单独的&#xff0c;没有办法在一个界面上展示的。这样一来呢&#xff0c;大家在看的时候其实是很不方便的&#xff0c;就是没有办法一目了…...

FineBI实战项目一(4):指标分析之每日订单总额/总笔数

1 明确数据分析目标 统计每天的订单总金额及订单总笔数 2 创建用于保存数据分析结果的表 use finebi_shop_bi;create table app_order_total(id int primary key auto_increment,dt date,total_money double,total_cnt int ); 3 编写SQL语句进行数据分析 selectsubstring(c…...

如何确定CUDA对应的pytorch版本?

参考&#xff1a;此链接...

分布式锁3: zk实现分布式锁5 使用中间件curator

一 curator的说明 1.1 curator的说明 curator是netflix公司开源的一个zk客户端。对Zookeeper提供的原生客户端进行封装&#xff0c;简化了Zookeeper客户端的开发量。Curator解决了很多zookeeper客户端非常底层的细节开发工作&#xff0c;包括连接重连、反复注册wathcer和Node…...

扩展边界opencv

扩展图像的边缘&#xff08;如上边增加50像素&#xff09;通常是通过添加额外的像素行来实现的 使用cv2.copyMakeBorder函数 valueborder_color指定了边框的颜色 import cv2 import numpy as np# 读取图像 image cv2.imread(th.jpg)# 设置边框宽度 top_border_width 50 # …...

开源C语言库Melon:Cron格式解析

本文介绍开源C语言库Melon的cron格式解析。 关于 Melon 库&#xff0c;这是一个开源的 C 语言库&#xff0c;它具有&#xff1a;开箱即用、无第三方依赖、安装部署简单、中英文文档齐全等优势。 Github repo 简介 cron也就是我们常说的Crontab中的时间格式&#xff0c;格式如…...

vue的学习方法

学习Vue.js的方法如下&#xff1a; 先了解基本概念和语法&#xff1a;学习Vue.js的第一步是了解它的基本概念&#xff0c;例如组件、指令、数据绑定等。你可以开始阅读Vue官方文档并参考教程和示例来掌握这些基本概念和语法。 实践项目&#xff1a;在理解了Vue.js的基本概念和…...

Hive之set参数大全-2

C 指定是否启用表达式缓存的评估 hive.cache.expr.evaluation 是 Hive 中的一个配置属性&#xff0c;用于指定是否启用表达式缓存的评估。表达式缓存是一项优化技术&#xff0c;它可以在执行查询时缓存表达式的评估结果&#xff0c;以减少计算开销。 在 Hive 配置中&#xf…...

C++面试宝典第17题:找规律填数

题目 仔细观察下面的数字序列,找到规律,并填写空白处的数字。 (1)1, 2, 4, 7, 11, 16, __ (2)-1, 2, 7, 28, __, 126 (3)6, 10, 18, 32, 57, __ (4)19, 6, 1, 2, 11, __ (5)2, 3, 5, 7, 11, __ (6)1, 8, 9, 4, __, 1/6 (7)1, 2, 3, 7, 16, __, 321 (8)1, 2, …...

ubuntu查看内存使用情况

在Ubuntu中&#xff0c;你可以使用一些命令来查看内存使用情况。这些命令可以帮助你了解系统的内存使用情况&#xff0c;包括已用内存、空闲内存、缓存和缓冲区的内存等。 1、使用free命令 free命令是一个非常有用的命令&#xff0c;可以快速查看系统的内存使用情况。在终端中…...

ES6 新增 Set、Map 两种数据结构的理解

ES6 新增 Set、Map 两种数据结构的理解 Set 是一种叫做集合的数据结构&#xff0c; 集合是由一堆无序的、相关联的 , 且不重复的内存结构【 数学中称为元素 】组成的组合&#xff1b; Map 是一种叫做字典的数据结构 字典是一些元素的集合 。每个元素有一个称作 key 的域 , 不同…...

影视视频知识付费行业万能通用网站系统源码,三网合一,附带完整的安装部署教程

在数字化时代&#xff0c;知识付费行业逐渐成为主流。人们对高质量内容的需求日益增长&#xff0c;越来越多的人愿意为有价值的知识和信息服务付费。为了满足这一市场需求&#xff0c;罗峰给大家分享一款全新的影视视频知识付费网站系统源码&#xff0c;为用户提供一站式的知识…...

Java字符串拼接常用方法总结

使用场景&#xff1a;用某个分隔符拼接字符串 下边是我使用过的几种方式废话不多说&#xff0c;直接上代码初始数据 1.使用流2.StringBuilder3.[StringJoiner](https://blog.csdn.net/qq_43417581/article/details/126076152?ops_request_misc%257B%2522request%255Fid%2522%2…...

【2023 CSIG垂直领域大模型】大模型时代,如何完成IDP智能文档处理领域的OCR大一统?

目录 一、像素级OCR统一模型&#xff1a;UPOCR1.1、为什么提出UPOCR&#xff1f;1.2、UPOCR是什么?1.2.1、Unified Paradigm 统一范式1.2.2、Unified Architecture统一架构1.2.3、Unified Training Strategy 统一训练策略 1.3、UPOCR效果如何&#xff1f; 二、OCR大一统模型前…...

Phi-2小语言模型QLoRA微调教程

前言 就在不久前&#xff0c;微软正式发布了一个 27 亿参数的语言模型——Phi-2。这是一种文本到文本的人工智能程序&#xff0c;具有出色的推理和语言理解能力。同时&#xff0c;微软研究院也在官方 X 平台上声称&#xff1a;“Phi-2 的性能优于其他现有的小型语言模型&#…...