vue.js搜索栏模糊查询

前言：对于列表有分页的情况下，一般是前端传一个查询关键字的字段给后端，后端处理后接口返回查到的数据进行展示；没有分页的查询前端可以自己用过滤实现。

一、实例

1. list列表数据展示：

 

2. 对数据进行模糊查询：

<van-search v-model="searchValue" shape="round" placeholder="搜索项目名称"></van-search>     
//处理后的列表数据 filterList
<van-cell v-for="(item, index) in filterList" :key="index">
    xxx
</van-cell>

data() {
    return {
        list: [],  //接口列表数据list
    };
},
computed: {
    // 模糊查询项目名称xmmc
    filterList() {
        return this.list.filter(p => {
            return p.xmmc.indexOf(this.searchValue) !== -1;
        });
    },
},

3.效果展示：