Vue系列文章(4)键盘事件及键盘修饰符

在监听键盘事件时,我们经常需要检查详细的按键。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 时被调用。

demo:html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<div id="app">
		<h1>按键:Events</h1>
		<label>姓名:</label>
		<input type="text" v-on:keyup.enter="logName"> <!--回车后触发方法-->
		<label>年龄:</label>
		<input type="text" v-on:keyup.alt.enter="logAge"><!--alt+enter触发该方法-->
	<script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

new Vue({
	el: '#app',
	data: {
		
	},
	methods: {
		logName: function(){
			console.log("你正在输入名字.");
		},
		logAge: function(){
			console.log("你正在输入年龄.");
		}
	}
});

猜你喜欢

转载自blog.csdn.net/jsqfengbao/article/details/94740121