当前位置：首页 > VUE

vue搜索实现

2026-01-07 22:43:09VUE

Vue 搜索功能实现方法

基于计算属性的搜索

在 Vue 中可以通过计算属性实现简单的搜索功能。这种方式适合小型数据集，利用 JavaScript 的 filter 方法进行筛选。

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' }
    ]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

模板部分使用 v-model 绑定搜索输入框：

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

使用第三方库实现高级搜索

对于更复杂的搜索需求，可以集成 Fuse.js 这类模糊搜索库。首先安装 Fuse.js：

npm install fuse.js

在组件中使用：

import Fuse from 'fuse.js'

data() {
  return {
    fuse: null,
    searchResults: [],
    items: [...], // 原始数据
    searchOptions: {
      keys: ['name', 'description'],
      threshold: 0.4
    }
  }
},
created() {
  this.fuse = new Fuse(this.items, this.searchOptions)
},
methods: {
  performSearch(query) {
    this.searchResults = query 
      ? this.fuse.search(query).map(result => result.item)
      : this.items
  }
}

防抖优化搜索性能

高频触发的搜索需要添加防抖功能，避免频繁计算：

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    this.performSearch(query)
  }, 300)
}

服务端搜索实现

当数据量很大时，应该通过 API 实现服务端搜索：

methods: {
  async searchFromServer(query) {
    try {
      const response = await axios.get('/api/search', {
        params: { q: query }
      })
      this.results = response.data
    } catch (error) {
      console.error(error)
    }
  }
}

多字段搜索实现

支持多个字段搜索时，可以构建更灵活的条件对象：

vue搜索实现

data() {
  return {
    searchParams: {
      name: '',
      category: '',
      priceRange: [0, 100]
    }
  }
},
computed: {
  filteredProducts() {
    return this.products.filter(product => {
      const nameMatch = product.name.includes(this.searchParams.name)
      const categoryMatch = this.searchParams.category 
        ? product.category === this.searchParams.category 
        : true
      const priceMatch = product.price >= this.searchParams.priceRange[0] && 
                       product.price <= this.searchParams.priceRange[1]
      return nameMatch && categoryMatch && priceMatch
    })
  }
}

每种方法适用于不同场景，计算属性方案适合客户端小型数据，Fuse.js 提供更好的模糊匹配，服务端搜索适合大数据量情况，多字段搜索则满足复杂查询需求。

标签: vue