当前位置：首页 > VUE

vue实现前端模糊查询

2026-01-22 19:57:47VUE

实现前端模糊查询的方法

在Vue中实现前端模糊查询可以通过多种方式完成，以下介绍几种常见的方法：

使用JavaScript的filter和includes方法

定义一个搜索方法，利用数组的filter和字符串的includes方法进行筛选：

methods: {
  searchItems() {
    if (!this.searchQuery) {
      this.filteredItems = this.items;
      return;
    }
    this.filteredItems = this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
}

在模板中使用v-model绑定搜索输入框：

vue实现前端模糊查询

<input v-model="searchQuery" @input="searchItems" placeholder="搜索...">
<ul>
  <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
</ul>

使用计算属性实现实时搜索

利用Vue的计算属性特性，可以实现无需手动触发搜索的实时查询：

computed: {
  filteredItems() {
    const query = this.searchQuery.toLowerCase();
    return query 
      ? this.items.filter(item => 
          item.name.toLowerCase().includes(query)
        )
      : this.items;
  }
}

实现更复杂的模糊搜索

对于需要更复杂的模糊匹配，可以使用第三方库如Fuse.js：

vue实现前端模糊查询

import Fuse from 'fuse.js';

// 在组件中
data() {
  return {
    fuse: null,
    searchQuery: '',
    items: [...], // 原始数据
    filteredItems: [] // 搜索结果
  };
},
created() {
  const options = {
    keys: ['name', 'description'], // 要搜索的字段
    threshold: 0.4 // 匹配阈值
  };
  this.fuse = new Fuse(this.items, options);
},
methods: {
  searchItems() {
    this.filteredItems = this.searchQuery 
      ? this.fuse.search(this.searchQuery).map(r => r.item)
      : this.items;
  }
}

添加防抖优化性能

对于大数据量或频繁输入的情况，可以添加防抖函数优化性能：

methods: {
  debounceSearch: _.debounce(function() {
    this.searchItems();
  }, 300)
}

然后在模板中使用：

<input v-model="searchQuery" @input="debounceSearch" placeholder="搜索...">

多字段搜索实现

如果需要搜索多个字段，可以扩展过滤逻辑：

filteredItems() {
  const query = this.searchQuery.toLowerCase();
  return query 
    ? this.items.filter(item => 
        item.name.toLowerCase().includes(query) ||
        item.description.toLowerCase().includes(query)
      )
    : this.items;
}

以上方法可以根据具体需求选择使用，对于简单场景使用内置方法即可，复杂场景可以考虑使用专门的模糊搜索库。