vue实现Input输入框模糊查询方法


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下

原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

下面先看示例:

搜索前:

vue实现Input输入框模糊查询方法

搜索后:

vue实现Input输入框模糊查询方法

实现方法:

methods:{
 // 点击搜索工程
 search(){
 // 支持模糊查询
 // this.xmgcqkJsonsData:用于搜索的总数据
   // toLowerCase():用于把字符串转为小写,让模糊查询更加清晰
 let _search = this.jobNo.toLowerCase();
 let newListData = []; // 用于存放搜索出来数据的新数组
 if (_search) {
 this.xmgcqkJsonsData.filter(item => {
  if (item.code.toLowerCase().indexOf(_search) !== -1) {
  newListData.push(item);
  }
 }) 
 }
 this.xmgcqkJsonsData = newListData;
 // console.log(‘新数组',newListData)
 }, 
}

以上方法是根据 工单号/流水号 进行查询的,如果在当前基础上增加对其它条件的搜索,比如 项目/工程名称,那只需要在原来的代码上增加一个判断条件即可,如:

if (item.code.toLowerCase().indexOf(_search) !== -1 || item.name.toLowerCase().indexOf(_search) !== -1) {
 newListData.push(item);
 }

这就是如何实现vue input输入框模糊查询的方法。

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
You might like
joomla组件开发入门教程
2016/05/04 PHP
PHP代码加密的方法总结
2020/03/13 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
Python中设置变量访问权限的方法
2015/04/27 Python
python二分查找算法的递归实现方法
2016/05/12 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python验证码识别实例代码
2018/02/03 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python高斯消除矩阵
2019/01/02 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python os模块在系统管理中的应用
2020/06/22 Python
详解anaconda安装步骤
2020/11/23 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
企业安全标语
2014/06/07 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
服务员岗位职责范本
2015/04/09 职场文书
三十年同学聚会致辞
2015/07/28 职场文书