Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Vue中的@keyup事件

Vue中的@keyup事件

作者头像
乐心湖
发布于 2020-07-31 09:12:08
发布于 2020-07-31 09:12:08
3.2K00
代码可运行
举报
文章被收录于专栏:MyTechnologyMyTechnology
运行总次数:0
代码可运行

Vue中的@keyup事件

事件代码

事件描述

@keyup.enter

回车按键松开

@keyup.left

左键松开

@keyup.right

右键松开

@keyup.up

上键松开

@keyup.down

下键松开

@keyup.delete

删除键松开

@keyup 事件常用的场景:登录页面可以使用该事件,当输入账号和密码后,无需点击登录按钮,绑定@keyup.enter="方法()",直接在输入密码以后回车完成登录,以增加用户体验 !

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" placeholder="请输入账号"/>
<input type="password" placeholder="请输入密码" @keyup.enter="keyupTest"/>

@keyup 如何在Element-ui 组件中使用

​ 在实际开发过程中,我们会发现在Element-ui组件中使用@keyup.enter 无效,这是因为Element-ui组件是在原生组件的基础上进行封装了的,如果想在Element-ui组件中使用@keyup 事件,那么就必须加上 native 关键字,@keyup.native.enter="方法()"

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Vue #3】指令补充&样式绑定
Vue 的指令修饰符(Directive Modifiers)是 Vue 模板语法中的重要特性,它们以半角句号 . 开头,用于对指令的绑定行为进行特殊处理
IsLand1314
2025/04/13
920
element-ui 常用组件技巧总结
好久不写文章了,做个element-ui的总结,会持续更新 element-ui的table列超出部分省略加悬浮提示
李维亮
2021/07/08
5650
vue使用element-ui的el-input监听不了回车事件解决
vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input> 解决方法需要在事件后面加上.native <el-input v-model="form.loginName" placeholder="账号" @keyup
hbbliyong
2018/04/17
8860
Vue后台管理系统-前端登录设计
在做后台管理系统时,登录模块是必不可少的,访模块看似简单,在开发涉及到许多细节,一般来说主要有以下这些:
越陌度阡
2023/05/01
6250
Vue后台管理系统-前端登录设计
测试平台开发(二) 高逼格登录页面
怎么样?哎哟,不错哦。本文就带大家一起用 Vue + Element-UI 把这个不错的登录页面开发出来。
dongfanger
2020/11/04
1.2K0
测试平台开发(二) 高逼格登录页面
vue 键盘事件keyup/keydoen
以上两种keyup和keyup.13方法是一样的,点击回车按键,就会执行 alert 方法
全栈程序员站长
2022/09/20
1.2K0
vue使用element-ui的el-input监听不了回车事件
原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看d
mcq
2018/06/20
1.3K0
[javascript] vue和elementui中的键盘事件
@keydown(键盘按下时触发),@keypress(键盘按住时触发),@keyup(键盘弹起)
唯一Chat
2021/01/27
1.4K0
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」
该事件与v-on:input事件的区别在于:input事件是实时监控的,每次输入都会调用,而@keyup.enter事件则是在pc上需要点击回车键触发,而在手机上则是需要点击输入键盘上的确定键才可触发。
全栈程序员站长
2022/08/12
14K0
vue中输入框事件的使用——@input、@keyup.enter、@change、@blur「建议收藏」
一些你可能还不知事件技巧– Vue3更新
Vue事件处理是每个Vue项目的必要方面。它用于捕获用户输入,共享数据以及许多其他创造性方式。
@超人
2021/07/05
7110
25 修饰键盘事件与鼠标事件
一般js监听键盘事件,例如keyup,无论用户是按下哪个键,例如a/b/c,事件函数都会触发。vue为了简化开发,对键盘事件、鼠标事件,提供了修饰符,方便只在用户按下某个特定键值时触发函数。
LIYI
2020/02/13
2.7K0
25 修饰键盘事件与鼠标事件
vue+element通过回车键使焦点移到(focus)下一个输入框
当form表单提交过程中,有时我们想输入一个点击enter直接跳到下一个input框输入,下面是一个简单操作,但是对于复杂的操作及封装的一些表单,可以再深入加工处理一下。这里本博主只举这里一个简单的例子。直接上代码:
用户2323866
2021/06/23
5.8K0
vue之事件处理
修饰符可以连续写,比如可以这么用:@click.prevent.stop="showInfo"
张哥编程
2024/12/13
1130
22. Vue keycodes按键修饰符
在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮。
Devops海洋的渔夫
2020/03/19
2K0
vue项目el-input键盘事件
在methods方法里,写上监听的方法,当获取的keyCode 为13时,表示按下了回车键,如果需要监听空格或者其他键,换成别的键值
跟着阿笨一起玩NET
2020/06/30
2.8K0
18. Vue keycodes按键修饰符
在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用「按键修饰符」来指定按下的键盘按钮。
Devops海洋的渔夫
2022/01/17
7090
18. Vue keycodes按键修饰符
Vue组件
组件就是可复用的Vue实例,在开发过程中,我们可以把重复使用的功能封装成自定义组件,以达到便捷开发的目的。
摸鱼的G
2023/02/22
9110
从零开始学VUE之模板语法(事件监听)
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
彼岸舞
2021/06/07
2.2K0
从零开始学VUE之模板语法(事件监听)
Vue快速入门(二)
v-for遍历对象,在python中显示的是kv,但是在这里顺序相反,显示的是vk
HammerZe
2022/05/09
3K0
Vue快速入门(二)
【Vue3更新】Vue事件处理指南
Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入,共享数据以及许多其他创造性方式。
前端小智@大迁世界
2022/06/15
8800
相关推荐
【Vue #3】指令补充&样式绑定
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验