当前位置：首页 > VUE

vue实现本地搜索

2026-03-08 13:55:06VUE

实现本地搜索的基本思路

在Vue中实现本地搜索功能通常涉及以下核心步骤：监听用户输入、过滤本地数据、动态渲染结果。无需调用API，直接对内存中的数据进行处理。

数据准备与搜索框绑定

在Vue组件的data中定义搜索关键词和原始数据列表：

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' },
      // 更多数据...
    ]
  }
}

模板中使用v-model双向绑定搜索框：

<input v-model="searchQuery" placeholder="Search...">

计算属性实现过滤

使用计算属性动态过滤数据，避免每次输入都手动触发搜索：

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

渲染搜索结果

在模板中直接使用计算属性：

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }} - {{ item.category }}
  </li>
</ul>

高级搜索功能扩展

对于复杂搜索需求，可引入第三方库如Fuse.js实现模糊搜索：

import Fuse from 'fuse.js'

computed: {
  fuse() {
    return new Fuse(this.items, {
      keys: ['name', 'category'],
      threshold: 0.4
    })
  },
  fuzzyResults() {
    return this.searchQuery ? 
      this.fuse.search(this.searchQuery).map(r => r.item) : 
      this.items
  }
}

性能优化建议

对于大型数据集：

vue实现本地搜索

添加防抖处理输入事件
使用Web Worker进行后台搜索
考虑分页展示结果

完整组件示例

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} ({{ item.category }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [/* 数据数组 */]
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return query ? 
        this.items.filter(i => 
          i.name.toLowerCase().includes(query) || 
          i.category.toLowerCase().includes(query)
        ) : 
        this.items
    }
  }
}
</script>

标签: vue