Vue按键修饰符

Vue按键修饰符教程

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，用于监听按键事件。

Vue按键修饰符详解

语法

<input @keyevent.key="function" />

说明

keyevent 即按键事件，比如 keydown，keyup 等。key 就是具体哪个按键，比如 enter，esc 等。

Vue定义的按键修饰符别名

键	描述
.enter	回车键
.tab	tab 键
.delete	删除和退格键
.esc	取消键
.space	空格键
.up	上键
.down	下键
.left	左键
.right	右键

案例

Vue按键修饰符

<!DOCTYPE html>
<html>
<head>
	<title>Vue 按键修饰符</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
	<div id="app">
		<input type="text" @keyup.enter="sayHello">
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
		},
		methods:{
			sayHello() {
				console.log('Hello HaiCoder');
			}
		}
	})
</script>
</html>

浏览器运行效果如下图所示：

01 vue key.png

当我们在 input 输出框，输入完成后，按下回车键，并且回车键弹起的时候，控制台输出了 Hello HaiCoder。因为我们使用了 Vue 按键修饰符中的 @keyup.enter 来捕获回车键的 keyup 事件。

Vue按键修饰符总结

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，用于监听按键事件。Vue 按键修饰符语法为：

<input @keyevent.key="function" />