您现在的位置是：网站首页> 编程资料编程资料

vue和js中实现模糊查询方式_vue.js_

2023-05-24 489人已围观

简介 vue和js中实现模糊查询方式_vue.js_

vue和js实现模糊查询

先来看效果图

在这里插入图片描述

这种数据量少的场景适用于前端实现模糊查询

如何实现？

js部分

我们用 computed 计算属性来动态获得图标列表数据

想要达到的功能是：输入框输入内容，列表框能动态根据输入值显示输入值相关的列表，即模糊查询

方法1

使用 filter() 和 includes() 实现

 computed: { searchList () { if (!this.inputVal) { return this.list } return this.list.filter(item => { return item.name.includes(this.inputVal) }) return data } },

方法2

使用 indexOf() 实现，（涉及到英文字母的还是建议处理一下大小写问题）

 computed: { searchList () { if (!this.inputVal) { return this.list } const data = [] this.list.forEach(item => { if (item.name.toLowerCase().indexOf(this.inputVal.toLowerCase()) !== -1) { data.push(item) } }) return data } },

方法3

使用 test() 正则匹配实现

语法：RegExp.test(string) ，string 要检测的字符串

该方法用于检测一个字符串是否匹配某个模式，如果匹配返回 true ，否则返回 false

 computed: { searchList () { if (!this.inputVal) { return this.list } const data = [] const reg = new RegExp(this.inputVal.toLowerCase()) this.list.forEach(item => { if (reg.test(item.name.toLowerCase())) { data.push(item) } }) return data } },

还有其他的方法，如 split()、match() 等

正则表达式实现模糊查询

拿到一个新需求就是在前端进行查询一个数据

虽然一般这种行为都是在后端进行但是有时候就是会给你这个需求，这里因为数据量较小所以就进行简单的遍历查询没有对数据进行排序后查询其实有想过二分查找之类的但是这里数据量较小就遍历吧

    search() {       console.log(this.searchInformation)       this.listData = []       var str = ".*" + this.searchInformation + ".*"       let reg = new RegExp(str)       //这里通过邀请码查询       for(var i=0;i

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：小程序页面间传参的五种方式实例详解_javascript技巧_

下一篇：vue.js中关于点击事件方法的使用(click)_vue.js_