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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/611646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Vivado Design Suite平台板、将IP目录与平台板流一起使用

使用Vivado Design Suite平台板流 Vivado设计套件允许您使用AMD目标设计平台板&#xff08;TDP&#xff09;创建项目&#xff0c;或者已经添加到板库的用户指定板。当您选择特定板&#xff0c;Vivado设计工具显示有关板的信息&#xff0c;并启用其他设计器作为IP定制的一部分以…

以数据资产入表为抓手,推动数据资产化

在数字化时代&#xff0c;数据已经成为企业的重要资产。数据资产化是将数据视为一种有价值的资产&#xff0c;对其进行有效管理和利用的过程。而数据资产入表则是将数据资产纳入财务报表&#xff0c;以反映其价值和对企业财务状况的影响。本文亿信华辰 将深入探讨数据资产化与数…

每天学习一点点之 Spring Boot 1.x 升级 2.x 之 allowBeanDefinitionOverriding

最近组内大佬正在进行 Spring Boot 版本的升级&#xff0c;从 1.x 版本升级到 2.x 版本。在查看代码变更时&#xff0c;我注意到我之前编写的一个名为 ShardingRuleStrategy 的类被添加了 Primary 注解。这个类在原来的代码中被标记为 Component&#xff0c;同时也在 API 中被定…

k8s-----存储卷(数据卷)

容器内的目录和宿主机的目录进行挂载。 容器的生命状态是短站的&#xff0c;delete删除&#xff0c;k8s用控制创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态。 一旦回到初始状态&#xff0c;所有的后天编辑的文件都会消失。 容器和节点之间创…

飞致云1panel v1.9.2 + 雷池WAF社区版 v4.0

可能有许多人都有这个需求&#xff1a;为自己的个人站点套上WAF&#xff0c;增加安全性&#xff0c;本文将介绍如何将1panel面板深度结合长亭雷池防火墙&#xff0c;实现为个人站点套上WAF并且自动续签ssl证书。 由于1panel和雷池WAF功能更新较快&#xff0c;上一篇文章已经不…

Kubernets(K8S)启动和运行01 快速入门

简介 Kubernetes is an open source orchestrator for deploying containerized applications. It was originally developed by Google, inspired by a decade of experience deploying scalable, reliable systems in containers via application-oriented APIs. Kubernete…

软考学习笔记--操作系统概述

操作系统是计算机系统中最重要&#xff0c;最基本的系统软件&#xff0c;它位于硬件和用户之间&#xff0c;一方面可以向用户提供接口&#xff0c;方便用户使用计算机&#xff1b;另一方面能管理计算机软硬件资源&#xff0c;以便充分利用他们。从资源管理的角度来看&#xff0…

Open CASCADE学习|模块组成

OpenCASCADE由七个模块组成&#xff0c;分别如下&#xff1a; Foundation Classes基础类 Modeling Data 建模数据 Modeling Algorithms 建模算法 Visualization 可视化 Data Exchange 数据交换 Application Framework 程序框架 Kernel Classes 核心类 2D Geometry 二维几…

nginx(1.13.7)首次安装出现:【make: *** 没有规则可以创建“default”需要的目标“build” 问题】解决措施

目录 前言&#xff1a; 一.龙蜥&#xff08;Anolis&#xff09;操作系统上安装GCC 1.安装gcc 2.检验安装 二.安装出现 make&#xff1a; *** 没有规则可以创建“default”需要的目标“build” 问题 1.解压安装nginx 2.安装出现问题展示 3.解决措施 4.重新编译进行安装 5…

yolov5-6.0 tensorrt推理

CMakeLists.txt cmake_minimum_required(VERSION 3.0) # CMake最低版本要求&#xff0c;低于2.6的构建过程会被终止set(CMAKE_CXX_STANDARD 14) #opencv4以上加此句 set(CMAKE_CXX_STANDARD 14) project(cmake_test) # 定义工程名称 find_package(OpenCV REQUIRED) …

【Sublime Text】| 01——下载安装注册

系列文章目录 【Sublime Text】| 01——下载软件安装并注册 【Sublime Text】| 02——常用插件安装及配置 失败了也挺可爱&#xff0c;成功了就超帅。 文章目录 前言1. 下载2. 安装3. 注册3.1 通过修改应用程序注册3.2 通过替换应用程序注册 感谢 前言 轻量代码编辑器有很多 之…

国家发改委:《电能质量管理办法(暂行)》2024年4月1日起施行

中华人民共和国国家发展和改革委员会令 第8号 《电能质量管理办法(暂行)》已经2023年12月26日第7次委务会议审议通过,现予公布,自2024 年4月1日起施行。 主任 郑栅洁 2023年12月27日 电能质量管理办法&#xff08;暂行&#xff09; 第一章 总则 第一条 为加强电能质量管理&…

中小型企业如何在当今的商业环境中占得一席之地?

在电商新零售的浪潮下&#xff0c;一种全新的消费模式正在崭露头角——消费增值模式。这种模式不仅改变了消费者的购物体验&#xff0c;更在电商领域掀起了一场革命。本文将通过具体数据&#xff0c;为您揭示消费增值模式的魅力。 一、消费增值模式的奥秘 消费增值模式的核心在…

【DevOps-08-2】Harbor的基本操作

一、简要描述 Harbor作为镜像仓库,主要的交互方式就是将镜像上传到Harbor上,以及从Harbor上下载指定镜像 在传输镜像前,可以先使用Harbor提供的权限管理,将项目设置为私有项目,并对不同用户设置不同角色,从而更方便管理镜像。 二、Harbor添加用户和项目 1、添加Harbor用…

一篇文告诉你:到底该如何搭建好企业知识库

全球化的竞争环境和瞬息万变的市场使得企业需要一种管理和整合各种信息与知识的方式。这就是企业知识库&#xff0c;一种核心资源&#xff0c;能够帮助企业提升工作效能&#xff0c;并更好地支持决策、创新和学习。但是&#xff0c;如何优化知识库&#xff0c;让它成为企业的有…

迁移学习的最新进展和挑战

随着深度学习和人工智能技术的飞速发展&#xff0c;迁移学习作为一种有效的机器学习方法&#xff0c;已经在各个领域取得了显著的成果。迁移学习是指将一个领域&#xff08;源领域&#xff09;的知识应用到另一个领域&#xff08;目标领域&#xff09;&#xff0c;以提高目标领…

spark基础--学习笔记

1 spark 介绍 1.1 spark概念 Apache Spark是专为大规模数据处理而设计的快速通用的分布式计算引擎&#xff0c;是开源的类Hadoop MapReduce的通用分布式计算框架。和MapReduce一样&#xff0c;都是完成大规模数据的计算处理。 简而言之&#xff0c;Spark 借鉴了 MapReduce思…

在1G的内存中,对百亿个QQ号去重?

文章目录 一、公共方法1、生成模拟QQ号2、读取数据文件3、测试方法 二、HashSet三、Java8的Stream四、Segment五、BloomFilter六、BitMap七、总结 假设QQ号是int类型&#xff0c;那么最多可以有4294967295个&#xff0c;就是43亿左右&#xff0c;QQ号无论多少位&#xff0c;每个…

【链表】力扣206反转链表

题目 力扣206反转链表 思路图解 代码实现 双指针代码实现 public static ListNode reverseList(ListNode head) {// 初始化pre&#xff0c;curListNode pre null;ListNode cur head;// 当cur为null时&#xff0c;说明反转结束while(cur ! null) {// 临时保存cur.next节点…

Python写冒泡

当你要用Python写冒泡排序算法时&#xff0c;你可以使用下面的代码&#xff1a; def bubble_sort(arr):n len(arr)for i in range(n-1):for j in range(n-i-1):if arr[j] > arr[j1]:arr[j], arr[j1] arr[j1], arr[j]return arr这个函数接受一个数组作为输入&#xff0c;并…