vue实现Input输入框模糊查询方法
作者：南方有梦，远方有止 发布时间：2024-04-28 09:20:46
标签：vue,input,模糊查询
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下
原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
下面先看示例：
搜索前：
搜索后：
实现方法：
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组件学习教程进行学习。
来源：https://www.cnblogs.com/silent007/p/10238112.html
0
投稿猜你喜欢
Metro风格设计主要特点 1.Windows 8 Metro风格设计，实现网站或系统功能的导航 2.纯Javascript实现 3.支持所- 图片外框特征参数:①dashed：虚线 ②dotted：点虚线 ③solid：实线 ④double：双线 ⑤groove：沟槽状 ⑥ridg
- 自 PHP 5.4.0 起，PHP 实现了代码复用的一个方法，称为 traits。Traits 是一种为类似 PHP 的单继承语言而准备的代
- private void Button1_Click(object sender, System.E
- 前言本方案只适应于小的项目、项目未上线或者紧急情况下可采用这种方式，一旦开启慢日志查询会增加数据库的压力，所以一般采用后台对数据操作时间写入
- 一、实验内容 对于下面这幅图像，编程实现染色体计数，并附简要处理流程说明。二、实验步骤1.中值滤波2.图像二值化3.膨胀图像4.腐
- 本文实例讲述了JS闭包。分享给大家供大家参考，具体如下：之前花了很多时间看书上对闭包的介绍，也看了很多人的写的关于闭包的博客，然后我就以为自
- 文件的属性所谓属性，就是能够通过一个文件对象得到的东西。>>> f = open("131.txt",
- 如下所示： exitAct = QAction(QIcon('exit.png'), '&Exit'
- 打开文件import xlrddata = xlrd.open_workbook('路径')获取文件中所有工作表的名称。da
- 一、Pandas如何对Categorical类型字段数据统计实战场景：对Categorical类型字段数据统计，Categorical类型是
- 虽然这种情况不应该发生，通常像我们关系型数据库，我们应该是事先设计好，以后不能改动，但是由于之前工作的疏忽，其实说实话，也不仅仅是我个人的疏
- 本文实例讲述了PHP模拟asp中response类的方法。分享给大家供大家参考。具体如下：习惯了asp或是asp.net开发的人, 他们会经
- salt分发后，主动将已完成的任务数据推送到redis中，使用redis的生产者模式，进行消息传送#coding=utf-8import f
- 思考一个问题：怎么实现在第一次检索的基础上进行二次检索？通常，我们的做法是第一次检索时保存检索条件，在第二次行检索时组合两次检索条件对数据库
- 使用 IE8 时发现其原生的 JSON 解析器存在 Bug，让我们先用 IE8 打开 DEMO 页面体验下。http://lab.grace
- 程序思路：此次程序主要是利用PIL（Python Image Libraty)这库，来进行图片的处理。PIL是一个功能非常强大的python
- 我想把本篇作为css基础教程的序曲，从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分，单独发表，其间可能会插
- 一、概述公司需要通过网页用户认证登录实现上网，网络设备判断当前帐号12小时没有没上网将会自动断开帐号上网，每天早上上班第一件事就是打开用户认
- 模型VGG，数据集cifar。对照这份代码走一遍，大概就知道整个pytorch的运行机制。 来源 定义模型：'''V
