前端模糊查询

项目场景：

模糊查询一般是后端会有接口，但是前端也可以做模糊查询，当数据全部返回，没有分页的时候前端可以做模糊查询，减少服务器压力

思路：

• filter结合indexOf方法
• 需要注意：
  任何字符串indexOf(' ') 返回都是0，数组indexOf(' ')返回都是-1
  eg：
      '你好'.indexOf(' ') // 0
      ['1','2','3'].indexOf(' ') // -1

<!-- 搜索栏 -->
<div class="search-input">
    <Input v-model="searchVal" placeholder="搜索"></Input>
</div>
<!-- 列表 -->
<ul class="list-box">
    <li v-for="item in showDataList" :key="item.id">
        <span :title="item.dataName">{{ item.name}}</span>
    </li>
</ul>

export default {
    data () {
        return {
            searchVal: '',
            list:[]
        }
    },
    computed: {
        showDataList () {
            const filterList = (this.list && this.list.length) ? this.list.filter(item => {
                return item.name.indexOf(this.searchVal) !== -1 // 这里是根据name进行模糊查询
            }) : []
        
             return filterList
        }
    }
}