当前位置：首页 > VUE

vue 搜索功能实现

2026-03-09 03:51:01VUE

实现搜索功能的基本思路

在Vue中实现搜索功能通常涉及以下几个关键步骤：监听用户输入、过滤数据列表、实时更新显示结果。以下是具体实现方法。

使用v-model绑定输入框

在模板中添加一个输入框，使用v-model双向绑定到Vue实例的数据属性。例如：

<template>
  <input v-model="searchQuery" placeholder="搜索..." />
</template>

在脚本中定义searchQuery：

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { name: '苹果', category: '水果' },
        { name: '香蕉', category: '水果' },
        { name: '胡萝卜', category: '蔬菜' }
      ]
    }
  }
}
</script>

计算属性过滤数据

利用计算属性实时过滤数据，避免直接修改原始数据。根据searchQuery的内容对items数组进行筛选：

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

显示过滤后的结果

在模板中遍历filteredItems显示搜索结果：

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

多条件搜索实现

若需支持多字段（如名称和分类）搜索，可扩展过滤逻辑：

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

添加防抖优化性能

频繁输入可能引发性能问题，可通过防抖函数限制触发频率：

methods: {
  debounce(fn, delay) {
    let timeout
    return (...args) => {
      clearTimeout(timeout)
      timeout = setTimeout(() => fn.apply(this, args), delay)
    }
  }
},
created() {
  this.debouncedFilter = this.debounce(this.updateFilter, 300)
}

服务端搜索实现

当数据量较大时，建议将搜索逻辑移至服务端：

methods: {
  async searchItems() {
    const response = await axios.get('/api/items', {
      params: { q: this.searchQuery }
    })
    this.filteredItems = response.data
  }
},
watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) this.searchItems()
  }
}

使用第三方库增强功能

对于复杂搜索需求，可考虑使用专门库如Fuse.js实现模糊搜索：

vue 搜索功能实现

import Fuse from 'fuse.js'

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