前端如何在angular和vue项目中进行实时数据过滤

有些数据完全可以前端进行过滤，否则每次过滤还要发个请求，太耗费性能。

let dataList= [ {
        title: '倚天屠龙记',
        number: 13
    }, {
        title: '我的前半生',
        number: 14
    }, {
        title: '安家',
        number: 12

} ]

Angular

在angular中用管道pipe：

xxx.component.html

<input type="text" [(ngModel)]="searchTxt" />
<div *ngFor="let item of dataList | SearchPipe:searchTxt">
  <div>
      <p> {{item.title}}</p>
      <p> {{item.number}}</p>
  </div>
</div>

search.pipe.ts

import { Injectable, Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'SearchPipe'
})
@Injectable()
export class SearchPipe implements PipeTransform {
  // datas要筛选的数据  args关键字
  transform(datas: any, args?: string): any {
    if (args) {
      return datas.filter(item => {
        return Object.values(item).find((param: string) => {
          if (!param) {
            return;
          }
          return JSON.stringify(param.toLowerCase()).indexOf(args.toLowerCase()) >= 0;
        });
      });
    }

    return datas;
  }
}

当输入框内容发生变化时，dataList会根据输入内容实时过滤出相关数据。

相关知识点：

1. filter()：数组的过滤器方法
2. Object.values()：es6提供的方法，用来获取对象键值对的值的集合
3. find()：返回满足条件的数据
4. indexOf：返回某个指定的字符串值在字符串中首次出现的位置。

 

vue

<input type="text" v-model="search">
<div v-for="item in dataList">
  <div>
      <p> {{item.title}}</p>
      <p> {{item.number}}</p>
  </div>
</div>

watch: {
    search: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
        // 例如 var condition={title:'a'}
        this.filter(condition, this.dataList);
      },
      deep: true
    }
}

filter(condition,data) {
    return data.filter( item => {
        return Object.keys( condition ).every( key => {
           return String( item[ key ] ).toLowerCase().includes( 
                   String( condition[ key ] ).trim().toLowerCase() )
            } )
     } )
}

1. filter()：数组的过滤器方法
2. Object.keys()：es6提供的方法，用来获取对象键值对的键的集合
3. every()：数组的every方法，因为检查数组内的所有元素是否都满足 某一条件，如果都满足返回true,.如果有一项元素不满足就返回false。
4. includes():es7中提供的新方法，用于检测某字符串中是否包含给定的值，如果有返回true，没有返回false,数组中也有该方法。