Vue模糊查询搜索详解

一、基本概念

1、Vue.js是一套用于构建用户界面的渐进式框架。

2、模糊查询指的是根据模糊的关键字进行查询，而不是精确匹配。

3、搜索则是指在给定的数据集中查找符合要求的数据。

二、使用场景

1、搜索引擎

2、电商网站查询商品

3、音乐网站查询歌曲

4、社交网站查询用户

三、实现方法

1、使用computed属性

computed: {
  filteredList() {
    return this.list.filter(item => {
      return item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
    });
  }
}

首先，定义一个computed属性，名为filteredList。它会返回一个根据搜索关键字筛选过的列表。其中，我们使用JavaScript的filter()方法来筛选需要的数据。

我们需要根据name属性来进行搜索，所以我们需要访问每个item的name属性。使用toLowerCase()方法可以将字母转换成小写，这样我们就可以不区分大小写地进行比较。

includes()方法用来判断一个字符串是否包含另一个字符串。如果字符串中包含了搜索关键字，就会返回true，否则返回false。

2、使用watch监听器

watch: {
  searchTerm(newVal) {
    this.filteredList = this.list.filter(item => {
      return item.name.toLowerCase().includes(newVal.toLowerCase());
    });
  }
}

这种方法比较直观，我们定义一个watch属性，用来监听searchTerm关键字的变化。每当搜索关键字发生变化时，就会执行这个watch属性中的函数。

在函数中，我们根据searchTerm筛选需要的数据，然后将这些数据赋值给filteredList属性。这样，我们就实现了一个基于watch的模糊搜索功能。

3、使用v-for和v-if指令

   

  {{ item.name }}

   

这种方法比较简单，我们使用v-for指令遍历整个数据列表，并使用v-if指令来筛选需要的数据。

在v-if条件中，我们通过比较item.name和searchTerm来判断是否需要显示这个item。这样，只有符合搜索条件的item才会被显示出来。

四、优化方法

1、使用debounce函数来减少搜索次数，提升性能。

2、在大量数据的情况下，可以使用虚拟滚动来提升渲染性能。

3、使用索引来快速定位需要搜索的数据，提升搜索速度。

五、代码示例

   

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' },
        { id: 4, name: '西瓜' },
        { id: 5, name: '桃子' },
        { id: 6, name: '梨子' },
      ],
      searchTerm: '',
      filteredList: [],
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
      });
    },
  },
};
</script>