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();
}
};
},

}

相关推荐
竹林8181 小时前
在Web3前端用Node.js子进程批量校验钱包,我踩了这些性能与安全的坑
javascript·node.js
Kel2 小时前
深入剖析 openai-node 源码:一个工业级 TypeScript SDK 的架构之美
javascript·人工智能·架构
SuperEugene3 小时前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
Luna-player3 小时前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js
敲代码的约德尔人3 小时前
JavaScript 设计模式完全指南
javascript·设计模式
angerdream3 小时前
最新版vue3+TypeScript开发入门到实战教程之Vue3详解props
javascript·vue.js
~欲买桂花同载酒~4 小时前
项目优化-vite打包优化
前端·javascript·vue.js
kyriewen4 小时前
JavaScript 继承的七种姿势:从“原型链”到“class”的进化史
前端·javascript·ecmascript 6
wangfpp5 小时前
性能优化,请先停手:为什么我劝你别上来就搞优化?
前端·javascript·面试