【Vue笔记整理七】按键修饰符（Vue事件三）

最新推荐文章于 2024-07-24 10:39:44 发布

小异常

最新推荐文章于 2024-07-24 10:39:44 发布

阅读量357

点赞数

分类专栏： Vue2.0 文章标签： vue javascript js 事件

本文链接：https://blog.csdn.net/sun8112133/article/details/110423349

版权

Vue2.0 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

版权声明：本文为小异常原创文章，非商用自由转载-保持署名-注明出处，谢谢！
本文网址：https://sunkuan.blog.csdn.net/article/details/110423349

上一篇博客我介绍了 Vue 事件 中的 事件修饰符，本篇博客主要讲解 Vue 事件 中的 按键修饰符，按键修饰符 与键盘中的按键事件绑定在了一起，用来修饰特定的按键。

本篇博客我会给大家介绍九个常用的 按键修饰符：.enter、 .tab、 .delete（捕获“删除”和“退格”键）、 .esc、 .space、 .up、 .down、 .left、 .right。

<body>
	<div id="app">
		<!-- enter回车键 -->
		enter: <input type="text" v-model="msg" @keyup.enter="keys('enter')"><br>
		<!-- tab键 -->
		tab: <input type="text" v-model="msg" @keyup.tab="keys('tab')"><br>
		<!-- delete键 -->
		delete: <input type="text" v-model="msg" @keyup.delete="keys('delete')"><br>
		<!-- esc键 -->
		esc: <input type="text" v-model="msg" @keyup.esc="keys('esc')"><br>
		<!-- space键 -->
		space: <input type="text" v-model="msg" @keyup.space="keys('space')"><br>
		<!-- up键，（down键、left键和right键类似） -->
		up: <input type="text" v-model="msg" @keyup.up="keys('up')"><br>
	</div>

	<!-- 引入 vue 的 js -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		const vm = new Vue({
			el : '#app',
			data : {
				msg : ''
			},
			methods : {
				keys(key) {
					alert('您按下的是' + key);
				}
			}
		});
	</script>
</body>