Vue按回车键进行搜索

这篇具有很好参考价值的文章主要介绍了Vue按回车键进行搜索。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索

第一种方法

在input标签内部增加@keyup.enter事件即可,事件名为按钮点击名称

<div class="center">
      <input placeholder="输入名称" v-model="keyword"
             @keyup.enter="getsearchdata">
</div>
<div class="seal" @click="getsearchdata">搜索</div>

第二种方法

<div class="center">
      <input placeholder="输入名称" v-model="keyword"
       @keyup.enter.native="getsearchdata" @submit.native.prevent
      >
</div>
<div class="seal" @click="getsearchdata">搜索</div>

 注:@keyup.enter.native="getsearchdata"//这里要和搜索的事件名称一样

         @submit.native.prevent //这句话禁止第一次进入页面回车搜索的时候刷新页面

以上两种方法,都能实现按回车键进行搜索的功能文章来源地址https://www.toymoban.com/news/detail-595714.html

到了这里,关于Vue按回车键进行搜索的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui中的el-input回车键事件

    今天项目里面的登录页面,需要按键盘回车键就直接登录,但是测试的时候,按了回车键后,直接刷新页面了,这不是我想要的,之后网上查了一下 代码如下: 上面的写法没问题,但是这样又会出现一个问题,当form表单中只有一个input框时,按回车键,页面还是刷新的。 之

    2024年02月11日
    浏览(59)
  • 前端实现 input 回车搜索(html,vue,react实现)

    搜索框是个常见的功能,除了 用ui库,有的时候必须要自己封装(因为改ui库太麻烦了,定制化要求很高),所以 涉及到 点击按钮搜索和回车搜索都要实现。下面就是实现的一些方法。 html里: 方式一:html里可以用 form 来实现,因为form里回车也能触发提交事件。思路就是

    2024年02月11日
    浏览(48)
  • IDEA下载vue.js插件,IDEA搜索不到vue.js该怎么安装

    一、在IDEA插件库下载Vue.js插件 1.在File--Settings--Plugins下载 2.搜索下载,点击Apply之后再重启 二、从磁盘安装Vue.js插件 IDEA搜索不到vue.js该怎么安装,这时需要从vue.js官网去下载对应jar包进行,再进行安装 注意:安装的Vus.js版本需要于IDEA版本对应,有版本兼容问题 1.查看IDEA版

    2024年02月04日
    浏览(44)
  • vue - vue使用腾讯api进行定位获取,绘制地图、标点、搜索、路线规划

    首本文主要记录一下在Vue项目里面使用腾讯地图api实现的一些功能。如:引入腾讯地图SDK、定位获取当前经纬度和详细地址、地图marker的使用、搜索功能和路线规划。 我这边实现的效果图如下: 首先要成为腾讯位置服务开发者或者使用公司提供的 key 值;才可以使用腾

    2023年04月17日
    浏览(54)
  • Vue中如何进行分布式搜索与全文搜索(如Elasticsearch)

    分布式搜索和全文搜索在现代应用程序中变得越来越重要,因为它们可以帮助用户快速查找和检索大量数据。Elasticsearch是一种强大的分布式搜索引擎,它可以用于实现高性能的全文搜索。本文将介绍如何在Vue.js应用程序中实现分布式搜索和全文搜索,以及如何与Elasticsearch集

    2024年02月08日
    浏览(41)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • 【js&vue】联合gtp仿写一个简单的vue框架,以此深度学习JavaScript

    lifecycle.js 注解: this.$options.beforeMount.call(this);与 this.$options.beforeMount();有什么区别: call(this)  的作用是将当前对象( this )作为参数传递给  beforeMount  方法,使得在  beforeMount  方法内部可以通过  this  访问到当前对象的上下文 直接调用了  beforeMount  方法,没有指定上下

    2024年02月09日
    浏览(56)
  • Vue中如何进行地理位置搜索与地点选择

    随着移动互联网和定位技术的普及,地理位置搜索和地点选择成为了很多应用程序中必不可少的功能。在Vue中,我们可以使用一些开源的地图API和第三方组件来实现这些功能。本文将介绍如何在Vue中进行地理位置搜索和地点选择,包括地点自动补全、地图显示和地点选择等功

    2024年02月09日
    浏览(34)
  • vue写法——使用js高阶函数实现多条件搜索功能

    🙂博主:小猫娃来啦 🙂本文核心: vue封装——使用js高阶函数实现多条件搜索功能 之前出过一个react写法的前端搜索(react写法——使用js高阶函数实现多条件搜索功能) 今天我们再研究一下vue中怎么实现。 react和vue有什么区别? 这个区别要细说可太多了,但是最终都能归

    2024年02月11日
    浏览(54)
  • js的鼠标事件(JavaScript的鼠标事件,vue的鼠标事件)

    js鼠标事件,相关属性: vue鼠标事件,相关属性 (js鼠标事件和vue中的鼠标事件区别是省略了on字符):

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包