vue实现Input输入框模糊查询方法
更新时间：2021年01月29日 11:27:43 作者：南方有梦，远方有止
这篇文章主要为大家详细介绍了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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于Vue项目中大文件切片上传实现秒传与断点续传的详细实现过程, 在开发中,如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue实现自定义H5视频播放器的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Vue 中如何使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解
在Vue前端开发中，使用 el-date-picker 组件进行日期选择是常见的需求，有时候我们需要限制用户只能选择当天、当天之前或当天之后的日期，本文将详细介绍如何使用 el-date-picker 组件实现这些限制，让你能够轻松应对各种日期选择场景,需要的朋友可以参考下2023-09-09
大家都知道在Vue里面有两种出名的插件能够支持发起异步数据传输和接口交互,分别是axios和vue-resource,同时vue更新到2.0之后,宣告不再对vue-resource更新,而是推荐的axios,今天就讲一下怎么引入axios,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue实现锚点跳转scrollIntoView()使用案例，文中结合实例代码介绍了vue锚点跳转的三种方式(页内跳转，跨页跳转，函数跳转),需要的朋友可以参考下2023-07-07
Vant UI中van-collapse下拉折叠面板默认展开第一项的方法
之前做项目的时候,使用了Collapse折叠面板,下面这篇文章主要给大家介绍了关于Vant UI中van-collapse下拉折叠面板默认展开第一项的相关资料,需要的朋友可以参考下2022-03-03
vue3使用el-radio-group获取表格数据无法选中问题及解决方法
这篇文章主要介绍了vue3使用el-radio-group获取表格数据无法选中问题及解决方法,本文给大家介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了Vue学习-VueRouter路由基础,路由本质上就是超链接,xiamian 文章围绕VueRouter路由的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习有所帮助2021-12-12
本文主要介绍了vue项目中使用require.context引入组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
vue2 element 实现表格点击详情返回时保留查询参数的示例代码
这篇文章主要介绍了vue2 element 实现表格点击详情返回时保留查询参数的示例代码,本文通过图文示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
最新评论