Vue学习笔记:键盘事件
2018/7/26 16:25:07
本文总结一下键盘事件

@keydown是按下键盘后触发事件

@keyup是离开键盘后触发事件


常用的键盘事件


按下后触发键盘事件:

@keydown.enter 回车

@keydown.left 左键

@keydown.right 右键

@keydown.up 上键

@keydown.down 下键

@keydown.delete 删除键


松开后触发键盘事件:

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

<div id="app">    <input @keydown="down()" type="text" value="按下键盘后触发事件">    <input @keyup="up()" type="text" value="松开键盘后触发事件"> </div>
new Vue({    el:'#app',    data:{    },    methods:{        down:function(){            ......        },        up:function(){            ......        }    } })
这里按下键盘上对应的按键就会触发
<div id="app">    <!-- 下面是按下对应的keycode键值后触发事件 -->    <!-- 按下键盘回车键触发事件 -->    <input @keydown.enter="down()" type="text" value="按下回车键触发事件">    <input @keyup.enter="up()" type="text" value="松开回车键触发事件">    <!-- 按下键盘左箭头键触发事件 -->    <input @keydown.left="down()" type="text" value="按下键盘左箭头键触发事件">    <input @keyup.left="up()" type="text" value="松开键盘左箭头键触发事件">    ......根据keycode键值以此类推 </div>

猜你喜欢

发表评论

标签云
返回顶部图片