当前位置：首页 > VUE

vue实现列表模糊检索

2026-02-20 21:05:47VUE

实现列表模糊检索的方法

在Vue中实现列表模糊检索通常涉及以下几个步骤：准备数据、绑定输入框、编写过滤逻辑、渲染结果列表。以下是具体实现方式：

准备数据与绑定输入框

在Vue组件的data中定义原始列表和过滤后的列表：

data() {
  return {
    originalList: ['Apple', 'Banana', 'Orange', 'Mango'],
    filteredList: [],
    searchQuery: ''
  }
}

在模板中添加输入框并绑定searchQuery：

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

编写过滤逻辑

在methods中实现过滤函数，使用JavaScript的字符串方法或正则表达式进行模糊匹配：

vue实现列表模糊检索

methods: {
  filterList() {
    if (!this.searchQuery) {
      this.filteredList = [...this.originalList];
      return;
    }
    const query = this.searchQuery.toLowerCase();
    this.filteredList = this.originalList.filter(item => 
      item.toLowerCase().includes(query)
    );
  }
}

渲染结果列表

在模板中展示过滤后的结果：

<ul>
  <li v-for="item in filteredList" :key="item">
    {{ item }}
  </li>
</ul>

使用计算属性优化

对于小型列表，可以使用计算属性替代方法，减少手动触发：

vue实现列表模糊检索

computed: {
  filteredList() {
    return this.originalList.filter(item =>
      item.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
}

支持多字段模糊检索

如果列表项是对象，可以扩展过滤逻辑：

filterList() {
  const query = this.searchQuery.toLowerCase();
  this.filteredList = this.originalList.filter(item => 
    item.name.toLowerCase().includes(query) || 
    item.description.toLowerCase().includes(query)
  );
}

使用第三方库增强

对于复杂需求，可以考虑使用Fuse.js等模糊搜索库：

import Fuse from 'fuse.js';

// 初始化
const fuse = new Fuse(this.originalList, {
  threshold: 0.4,
  keys: ['name', 'description']
});

// 搜索
this.filteredList = fuse.search(this.searchQuery).map(result => result.item);