《vue2.0 框架学习》--键盘事件和修饰符

最新推荐文章于 2023-05-10 16:43:40 发布

良言SE

最新推荐文章于 2023-05-10 16:43:40 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32265719/article/details/82809993

本文详细介绍了Vue.js中键盘事件的触发顺序及使用方法，包括keydown、keypress、keyup事件及键盘事件修饰符如@keydown.enter等。通过示例代码演示了如何在Vue应用中响应键盘输入，特别关注于事件修饰符的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

day02 键盘事件 keydown ->keypress->keyup和键盘事件修饰符

键盘事件
事件触发顺序：keydown - > keypress - > keyup
@keydown.enter 回车
@keydown.left 左键
@keydown.right 右键
@keydown.up 上键
@keydownp.down 下键
@keydown.delete 删除键

demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue2.0 day2</title>
	<script src="../node_modules/vue/dist/vue.js"></script>

	<style>
		[v-cloak]{display: none;}
		*{margin:0;padding: 0;}
		body{font-size: 16px;color: black;}
		a{text-decoration: none; color: black;}
		#app{}
		#app form p label{
			display: inline-block;
			width: 64px;
			height: 20px;
			text-align: right;
		}

	</style>
</head>
<body>

	<div id="app" v-cloak>

		<!--  -->
		<p @click.once="once">{{msg}}</p>
		<!--  -->
		<p>
			<input type="text" name="" @keydown.enter="keyEnter"></input>
		</p>

	</div>
	<script>
		window.onload=function(){

			new Vue({
				el:'#app',
				data:{
					msg:'hello vue'
				},
				filters:{
					// 码值表
				},
				methods:{
					keyEnter:function(){
						console.log("Enter");
					},
					once:function(){
						// 签到 一天点击一次
						console.log("once");
					},
					hander:function(){
						alert(this.msg)
					}
				}
			});
		}
	</script>
	
</body>
</html>