当前位置：首页 > VUE

vue中如何实现搜索

2026-02-21 11:45:39VUE

Vue 中实现搜索功能的方法

使用计算属性过滤数据

在 Vue 中可以通过计算属性实现简单的搜索功能。定义一个搜索关键词的 data 属性，然后使用计算属性对原始数据进行过滤。

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

使用 v-model 绑定搜索输入

在模板中使用 v-model 绑定搜索输入框到 searchQuery 变量。

vue中如何实现搜索

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

使用 Lodash 的防抖函数优化性能

对于大数据量或频繁搜索的情况，可以使用 Lodash 的 debounce 函数优化性能。

import { debounce } from 'lodash'

methods: {
  search: debounce(function() {
    // 执行搜索逻辑
  }, 500)
}

结合 Vuex 实现全局搜索

在大型应用中，可以使用 Vuex 管理搜索状态。

vue中如何实现搜索

// store.js
state: {
  searchQuery: '',
  items: [...]
},
getters: {
  filteredItems: state => {
    return state.items.filter(item =>
      item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
    )
  }
}

使用第三方搜索库

对于更复杂的搜索需求，可以考虑使用专门的搜索库如 Fuse.js。

import Fuse from 'fuse.js'

const fuse = new Fuse(this.items, {
  keys: ['name'],
  threshold: 0.4
})

this.filteredItems = fuse.search(this.searchQuery)

服务端搜索实现

对于大量数据，可以实现服务端搜索，通过 API 请求获取搜索结果。

methods: {
  async search() {
    const response = await axios.get('/api/search', {
      params: { q: this.searchQuery }
    })
    this.results = response.data
  }
}

以上方法可以根据具体需求选择使用，简单搜索场景使用计算属性即可，复杂场景可以考虑使用专门搜索库或服务端搜索。