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

}

相关推荐
鱼干~1 分钟前
electron基础
linux·javascript·electron
香香爱编程1 分钟前
electron对于图片/视频无法加载的问题
前端·javascript·vue.js·chrome·vscode·electron·npm
程序猿_极客34 分钟前
【期末网页设计作业】HTML+CSS+JavaScript 蜡笔小新 动漫主题网站设计与实现(附源码)
前端·javascript·css·html·课程设计·期末网页设计
阿桂有点桂1 小时前
React使用笔记(持续更新中)
前端·javascript·react.js·react
im_AMBER2 小时前
React 15
前端·javascript·笔记·学习·react.js·前端框架
蒲公英源码2 小时前
基于PHP+Vue+小程序快递比价寄件系统
vue.js·小程序·php
许___3 小时前
el-table多选模式下跨分页保留当前页选项
javascript·vue.js
梦想平凡3 小时前
情怀源代码工程实践(加长版 1/3):确定性内核、事件回放与最小可运行骨架
开发语言·javascript·ecmascript
爱吃甜品的糯米团子4 小时前
详解 JavaScript 内置对象与包装类型:方法、案例与实战
java·开发语言·javascript
华仔啊4 小时前
JavaScript + Web Audio API 打造炫酷音乐可视化效果,让你的网页跟随音乐跳起来
前端·javascript