当前位置：首页 > VUE

vue实现条件搜索

2026-03-28 13:08:16VUE

Vue 实现条件搜索的方法

使用计算属性过滤数据

通过计算属性结合 filter 方法实现条件搜索。定义一个搜索关键词 searchQuery 和数据列表 items，计算属性返回过滤后的结果。

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` 绑定搜索输入

在模板中使用 v-model 绑定搜索关键词，并展示过滤后的结果。

vue实现条件搜索

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

多条件搜索

扩展搜索逻辑，支持多个字段的联合搜索。例如，同时搜索 name 和 category 字段。

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

使用第三方库（如 Lodash）

对于复杂搜索逻辑或性能优化，可以使用 Lodash 的 _.debounce 实现防抖搜索，减少频繁触发计算。

vue实现条件搜索

import { debounce } from 'lodash';

methods: {
  handleSearch: debounce(function() {
    this.filteredItems = this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }, 300)
}

结合后端搜索

对于大数据量场景，将搜索关键词通过 API 发送到后端，返回过滤后的数据。

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

使用 Vuex 管理搜索状态

在大型应用中，通过 Vuex 集中管理搜索状态和逻辑。

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