vue监听键盘回车事件的三种方法

方法一:

@keydown='show()' 当然我们传个$event 也可以在函数中获 ev.keyCode

if(ev.keyCode==13){

alert('你按了回车键!')

}

1

2

3

4

方法二:

<input type="text" @keyup.enter="show()">回车执行

<input type="text" @keydown.up='show()' >上键执行

<input type="text" @keydown.down='show()' >下键执行

<input type="text" @keydown.left='show()' >左键执行

<input type="text" @keydown.right='show()' >右键执行

1

2

3

4

5

方法三:

c 复制代码
<el-button type="primary" @click="login">登录
created() {
this.keyupSubmit();
},
methods(){
keyupSubmit() {
document.onkeydown = (e) => {
let _key = window.event.keyCode;
//!this.clickState是防止用户重复点击回车
if (_key === 13&&!this.clickState) {
this.login();
}
};
},

}

相关推荐
上单带刀不带妹23 分钟前
JavaScript 中的宏任务与微任务
开发语言·前端·javascript·ecmascript·宏任务·微任务
zwjapple2 小时前
Next.js 中使用 MongoDB 完整指南
开发语言·javascript·mongodb
像素之间2 小时前
elementui中rules的validator 用法
前端·javascript·elementui
小高0072 小时前
🚀把 async/await 拆成 4 块乐高!面试官当场鼓掌👏
前端·javascript·面试
2401_837088502 小时前
AJAX快速入门 - 四个核心步骤
前端·javascript·ajax
无羡仙2 小时前
当点击链接不再刷新页面
前端·javascript·html
雲墨款哥2 小时前
为什么我的this.name输出了空字符串?严格模式与作用域链的微妙关系
前端·javascript·面试
桃桃乌龙_95272 小时前
vue-demi打通pnpm替换npm导致的pinia使用问题
前端·vue.js
Linsk2 小时前
前端开发:不处理浏览器兼容性,才是最佳的浏览器兼容性处理方式
前端·vue.js·前端工程化
jqq6662 小时前
Vue3脚手架实现(十、补之前配置)
前端·javascript·vue.js