Vue.js入门笔记（七）--按键修饰符_下列按键修饰符中表示按下回车键的是-CSDN博客

本文链接：https://blog.csdn.net/gaoxiaokun4282/article/details/106309933

按键修饰符

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

按键码

注意：keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

注意：有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

案例

按下回车键后，浏览器会提示“按下的是回车键”。

<div id="app">
    Vue:<input type="text" @keydown.enter="fun()">
</div>

new Vue({
    el:"#app",
    methods:{
        fun:function(){
            alert("按下的是回车键");
        }
    }
});

运行效果：
在这里插入图片描述
完整 Demo 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			Vue:<input type="text" @keydown.enter="fun()">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			methods:{
				fun:function(){
					alert("按下的是回车键");
				}
			}
		});
	</script>
</html>