vue如何在手机端实现边输入边搜索数组，然后过滤数组？

Question

vue如何在手机端实现边输入边搜索数组，然后过滤数组？

Answer 1

看你搜索的条件
简单写一个方法 假如你按 name搜索

getFilterData(){

this.list = this.list.filter(item=>item.name.includes(key))//key 是你搜索的关键字

}

另外 这个方法 最好加个 防抖函数 避免频繁输入影响性能.参考 lodash _debounce

Answer 2

<input
  type="text"
  v-model="keyword"
  class="search-input"
  placeholder="输入进行搜索"
  @keyup="endInput"
/>

   // 键盘抬起时，模糊查询关键词
    endInput() {
      if (this.keyword.length > 0) {
      // 输入时的操作，根据输入查询符合条件的数组渲染到列表中去，allList表示所有数据，searchList表示搜索结果数组
        this.searchList = this.fuzzyQuery(this.allList, this.keyword) // 使用 this.allList.filter(x => x.label && x.label.includes(this.keyword)) 效果相同
      } else {
        //无输入的操作
      }
    },
    // 模糊查询事件
    fuzzyQuery(list, keyWord) {
      const reg = new RegExp(keyWord)
      const arr = []
      //循环每一项，找到符合条件的
      for (let i = 0; i < list.length; i++) {
        if (reg.test(list[i].label)) {
          arr.push(list[i])
        }
      }
      return arr
    }