在监听键盘事件时,我们经常需要检查详细的按键。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("你正在输入年龄.");
}
}
});