Vue 键盘事件
Vue 中常用的按键别名
-
回车：enter
-
退格：delete
-
退出：esc
-
空格：space
-
上：up
-
下：down
-
左：left
-
右：right
示例
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
实例
</details>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
new Vue({
el: '#root',
methods: {
showInfo(e) {
alert(e.target.value)
}
}
})
</script>
</body>
</html>
Vue 中特殊的按键别名
- 换行：tab
- ctrl、alt、shift、meta
- 如配合 keydown 使用：正常触发事件
- 如配合 keyup 使用：按下修饰键同时，需要再按下其他键，随后释放其他键，事件才会触发
