Commonly used button aliases in Vue:
Carriage return: enter
delete: delete (captures "delete" and "backspace" keys)
Exit: esc
Space: space
Newline: tab (it is special and can only be used with keydown)
up: up
down: down
Left: left
Right: right
Vue is a key that provides an alias, you can use the key value of the security inspector to bind, but be careful to convert it to kebab-case (short horizontal line naming)
System modifier keys (special usage): ctrl, alt, shift, meta
(1) Use with keyup: press the modifier key at the same time, then press other keys, and then release the other keys, the event is triggered
(2) Use with keydown: trigger events normally, press to trigger events
You can also use keyCode to specify specific keys (not recommended)
showinfo(e){
if(e.keyCode!==13) return
console.log(e.target.value)
}Vue.config.keyCodes. Custom key name = key code, you can go to the property key alias
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<h2>欢迎来到{
{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.meta="showinfo">
</div>
<script type="text/javascript">
Vue.config.productionTip=false
Vue.config.keyCodes.huiche=13//定义了一个别名键
new Vue({
el:'#root',
data:{
name:'尚硅谷'
},
methods:{
showinfo(e){
// if(e.keyCode!==13) return
console.log(e.target.value)
}
}
})
</script>
</body>
</html>