计算属性实现模糊搜索功能场景

模糊搜索

功能简介

我相信大家在项目中都会遇到模糊搜索这个功能要求，即我们在输入框内输入文字后显示与输入文字相关的关键字，那这个具体实现方案是什么，这是我在最近一期蓝桥杯楼赛中遇到的业务需求，大家可以来思考一下，下面我将进行实现详解

知识点准备

一般我们在考虑这个功能的时候需要考虑到我们在输入的时候，每时每刻中我们的输入字都发送了改变，所以要考虑是使用change函数来实现这个功能是不现实的，所以说，我们一般使用计算属性computer来实现这个业务。然后我们就可以考虑通过我们输入的关键字来进行模糊搜索，之前我想使用正则来实现这个问题，但是可能会还是有一些麻烦，所以我们要使用到filter与include

1. 计算属性computer
   在系统性学习vue的时候大家都很好奇计算属性的应用场景在哪里，这里就出现了，在官网文档中提出所以，对于任何复杂逻辑，你都应当使用计算属性，所以说这里我们要对数组进行筛选也要应用到计算属性，模板如下，最后返回的是我们想要渲染到页面上的数组，也就是通过搜索筛选完的。

computer : {
    filterList() {
        return array
    }
}
复制代码

1. include
   include是检测数组是否包含参数，返回值为布尔值，与我们接下来的一个函数对应即filter

let array = ['cxy', 'juejin'];
array.includes('cxy'); 
// true 
复制代码

1. filter
   filter的作用就是对某个数组按照某个筛选判断方法返回符合条件的数组，所以我们需要与include搭配使用，即当include的返回值为布尔值，所以经过完美搭配模糊搜索

this.postList.filter(item => {
    return item.title.include(this.search)
})
复制代码

完整代码

完整代码如下，实现模糊搜索

computer : {
    filterList() {
        return this.postList.filter(item => {
            return item.title.include(this.search)
        })
    }
}