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陷阱清单
May 31 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
ES6的新特性概览
Mar 10 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
bootstrap Table的一些小操作
Nov 01 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
Nov 23 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
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php url路由入门实例
2014/04/23 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python使用minidom读写xml的方法
2015/06/03 Python
Django中使用locals()函数的技巧
2015/07/16 Python
实例讲解Python爬取网页数据
2018/07/08 Python
解决Django中多条件查询的问题
2019/07/18 Python
在python中使用nohup命令说明
2020/04/16 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
应届生个人求职信模板
2013/11/26 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
电钳专业个人求职信
2014/01/04 职场文书
中秋晚会活动方案
2014/08/31 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers