vue实现条件查询筛选功能（无需通过后端sql查询筛选）

在此时前我们要知道 vue中有一个过滤方法，filter()；

直接进入例子：

想要在Vue中通过Filter对一个集合（前端返回展示列表）进行筛选，可以使用Vue中的计算属性(computed property)。计算属性是根据已有数据计算出一个新数据的方法，当数据变化时会自动重新计算（不需要点击查询按钮来得出筛选结果，提高用户体验）。可以将Filter作为计算属性的一部分来筛选集合。

要注意当我们使用computed进行筛选时，我们再次渲染该集合的时候就不要用集合的原本的名字，我们要使用computed中的方法名；

以下是一个通过Filter和name属性筛选集合的示例：

template部分：

<div v-for="contact in filteredContacts">{{ contact.name }}</div>

export default {
  data() {
    return {
      searchText: '',
      searchAge: '',
      contacts: [
        { name: 'Alice', phone: '555-1234' },
        { name: 'Bob', phone: '555-5678' },
        { name: 'Charlie', phone: '555-9876' }
      ]
    }
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact => {
        let name = contact.name.toLowerCase();
        let searchText = this.searchText.toLowerCase();
        contacts=name.includes(searchText);
        return contacts;
      });
    }
  }
}

上面是一个通过姓名进行筛选查询满足条件的结果，如果我们还有其他条件 比如性别；我们只需要根据上面筛选出来的结果再次筛选；如下

filteredContacts() {

        return this.contacts.filter(contact => {

        let name = contact.name.toLowerCase();

        let searchText = this.searchText.toLowerCase();
        contacts=name.includes(searchText);

        contacts=age.includes(searchAge);

        return contacts; 
}); }

这样我们就可以动态的进行条件查询啦

tip~ 该查询适用于查询条件不会经常变化；因为你每次进行条件查询时都不会重新请求数据库，当你的查询结果会一直改变的时候，你不能及时的获取修改结果~~~