首页 > 其他分享 >Vue进阶(幺玖玖):vue 输入框中按enter键实现搜索或表单提交

Vue进阶(幺玖玖):vue 输入框中按enter键实现搜索或表单提交

时间:2023-10-21 16:05:46浏览次数:24  
标签:el Vue 进阶 keyup 输入框 enter input 监听

在前端项目开发过程中,为优化用户体验,可考虑在用户输入查询条件后按回车键实现搜索效果。实现方法如下:

el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter

<el-input @keyup.enter.native="search" v-model='form.searchAttr' ></el-input>

<input @keyup.enter="search" ></el-input>

Vue中,已经为常用的按键设置了别名,这样我们就无需再去匹配keyCode,直接使用别名就能监听按键的事件。

其常用的快捷键如下图所示: 在这里插入图片描述 在这里插入图片描述

标签:el,Vue,进阶,keyup,输入框,enter,input,监听
From: https://blog.51cto.com/shq5785/7967455

相关文章

  • vue实现点击复制功能(无需安装库)
     1.标签<buttonv-copy="text">复制文本</button>text是要复制的内容,在data函数中 2.在main.js中注册copy指令Vue.directive('copy',{bind:function(el,binding){el.$copy=function(){consttextarea=document.createElement('text......
  • VUE
    在body标签中编写视图       ......
  • [Vue]键盘事件
    1.Vue中常用的按键别名:   回车=>enter   删除=>delete(捕获“删除”和“退格”键)   退出=>esc   空格=>space   换行=>tab(特殊,必须配合keydown使用)   上=>up   下=>down   左=>left  右=>right2.Vue未提供别名的按键,可以使用按键原始的key值去......
  • 基于Vue.js和Spring Boot的口罩自助售卖系统:设计、实现与技术深度解析
    本文介绍了一种基于Vue.js和SpringBoot的口罩自助售卖系统的设计与实现。该系统通过前端Vue.js框架和后端SpringBoot框架的结合,实现了用户注册登录、口罩浏览购买、订单管理等功能。通过详细的代码示例和技术深度的解析,读者能够全面了解系统的设计思路和实现方法。1.引言随着全......
  • 详解vue大文件视频切片上传的处理方法
    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下 前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟......
  • SpringBoot Vue3打造企业级一体化SaaS系统[最新版完结]
    点击下载:SpringBoot+Vue3打造企业级一体化SaaS系统     提取码:3ixbSpringBoot和Vue3是目前十分盛行的JavaWeb开发技术栈。SpringBoot能够快速构建Web应用程序,并提供许多有用的功用,如自动配置、快速开发、高效性能、易于部署等。Vue3是一种盛行的前端框架,它能够协助开发......
  • Vue前端框架
    Vue渐进式javacript框架插件可选安装-谷歌访问助手这是一个谷歌浏览器上的插件安装必安插件(文件夹)下的google-access-helper-2.3.0(文件夹)复制到你想放的文件夹下(安装后不可以挪动位置)建议D盘下,弄一个专门按软件的文件夹打开谷歌浏览器-扩展程序-开......
  • Vue.js设计与实现 pdf电子版 霍春阳
    Vue.js设计与实现pdf电子版霍春阳作者: 霍春阳出版年: 2022-2-10ISBN: 9787115583864连接提取码:yfji干货密度极高,作者写技术文章确实有一套。既有API设计的背景分析,又有规范级别的细节讲解,看完后基本能从头写一个Vue3出来了。......
  • 6基于SpringBoot + Vue 的超市进销存系统-计算机毕业设计源码+LW文档
    摘 要 超市管理系统是指一种针对超市的信息化管理系统,它通过计算机技术和网络技术,对超市的采购、销售、库存等业务进行管理和控制。随着社会经济的发展和人们生活水平的提高,超市已经成为人们日常生活中必不可少的消费场所,而超市管理系统的出现则极大地提高了超市的经营效率和......
  • Vue3 typescript script setup获取范型组件的ref
    原博客地址:https://juejin.cn/post/7247433208437850169?from=search-suggest在typescript下,如果想获取带类型的组件模板引用,官方文档中说明了方式:https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refsconstmodal=ref<InstanceTy......