Vue之v-on修饰符之按键修饰符（011）-白红宇的个人博客

发布日期：2021-05-07 08:33:53 浏览次数：26 分类：原创文章

本文共 962 字，大约阅读时间需要 3 分钟。

Vue之v-on修饰符之按键修饰符

按键事件有：

@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
常用按键修饰符别名

别名修饰符	键值修饰符	对应按键
.delete	.8/46	回格/删除
.tab	.9	制表
.enter	.13	回车
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下

还其它，一般我们不用键值修饰符，不易读。
完整代码示例

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<script src="https://unpkg.com/vue/dist/vue.js"></script>		<title>v-on(keyup)</title>	</head>	<body>		<div id="app">			<input type="text" @keyup.enter="printSelf($event)" value="回车" /></br>			<input type="text" @keyup.left="printSelf($event)" value="左" /></br>			<input type="text" @keyup.right="printSelf($event)" value="右" /></br>			<input type="text" @keyup.up="printSelf($event)" value="上" /></br>			<input type="text" @keyup.down="printSelf($event)" value="下" />		</div>		<script>			let vm = new Vue({				el: "#app",				methods: {					printSelf() {						console.log(event);					}				}			})		</script>	</body></html>

让各文本框得到焦点后，依次按下回车键、方向键左键、左键、上键、下键结果如下图。
在这里插入图片描述

上一篇：前端学习笔记63-行高

下一篇：前端学习笔记62-iconfont

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

Vue之v-on修饰符之按键修饰符

发表评论

最新留言

关于作者

推荐文章