当前位置：首页 > VUE

vue前端实现模糊查询

2026-01-20 05:10:33VUE

实现模糊查询的基本思路

在Vue中实现模糊查询通常需要结合输入框的监听事件和数据过滤功能。核心逻辑是通过用户输入的关键词，对目标数据进行筛选匹配。

使用计算属性实现

计算属性适合处理需要响应式更新的数据过滤场景。在Vue组件中定义一个计算属性来返回过滤后的结果：

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

模板部分需要绑定输入框和展示结果：

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

使用watch实现复杂逻辑

当需要更复杂的过滤逻辑或异步操作时，可以使用watch选项：

data() {
  return {
    searchTerm: '',
    filteredItems: []
  }
},
watch: {
  searchTerm(newVal) {
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(newVal.toLowerCase())
    );
  }
}

支持多字段搜索

扩展过滤逻辑以支持多个字段的模糊查询：

computed: {
  filteredItems() {
    const term = this.searchTerm.toLowerCase();
    return this.items.filter(item => 
      Object.values(item).some(
        val => String(val).toLowerCase().includes(term)
      )
    );
  }
}

添加防抖优化性能

对于大数据量或频繁输入的情况，添加防抖函数避免频繁计算：

methods: {
  debounceSearch: _.debounce(function() {
    const term = this.searchTerm.toLowerCase();
    this.filteredItems = this.items.filter(item =>
      item.name.toLowerCase().includes(term)
    );
  }, 300)
},
watch: {
  searchTerm() {
    this.debounceSearch();
  }
}

使用第三方库增强功能

对于更高级的模糊搜索需求，可以考虑使用Fuse.js等专业库：

vue前端实现模糊查询

import Fuse from 'fuse.js';

created() {
  this.fuse = new Fuse(this.items, {
    keys: ['name', 'description'],
    threshold: 0.4
  });
},
computed: {
  filteredItems() {
    return this.searchTerm 
      ? this.fuse.search(this.searchTerm).map(r => r.item)
      : this.items;
  }
}