当前位置：首页 > VUE

vue 实现条件搜索

2026-03-28 13:33:48VUE

实现条件搜索的基本思路

在Vue中实现条件搜索通常涉及以下几个核心步骤：监听用户输入、过滤数据列表、动态更新视图。以下是具体实现方法。

使用v-model绑定搜索条件

在模板中通过v-model绑定输入框与Vue实例的数据属性，实时捕获用户输入的关键词。

<template>
  <input v-model="searchQuery" placeholder="输入搜索关键词">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' }
      ]
    }
  }
}
</script>

计算属性实现动态过滤

通过计算属性computed对原始数据列表进行过滤，返回符合搜索条件的结果。使用filter方法和includes（或正则表达式）匹配关键词。

vue 实现条件搜索

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

渲染过滤后的结果

在模板中直接使用计算属性filteredItems渲染结果列表，确保视图随搜索条件动态更新。

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

多条件搜索的实现

若需多个条件组合搜索，可以扩展搜索逻辑。例如同时匹配名称和类别：

vue 实现条件搜索

data() {
  return {
    searchName: '',
    searchCategory: '',
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' }
    ]
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      const nameMatch = item.name.toLowerCase().includes(this.searchName.toLowerCase());
      const categoryMatch = item.category.toLowerCase().includes(this.searchCategory.toLowerCase());
      return nameMatch && categoryMatch;
    })
  }
}

使用第三方库优化性能

对于大型数据集，可使用lodash.debounce减少频繁触发过滤的频率，提升性能。

import debounce from 'lodash.debounce';

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

服务端搜索的实现

若数据量极大，建议将搜索逻辑移至服务端。通过API传递搜索参数，获取后端返回的过滤结果。

methods: {
  async fetchResults() {
    const response = await axios.get('/api/items', {
      params: { search: this.searchQuery }
    });
    this.filteredItems = response.data;
  }
},
watch: {
  searchQuery(newVal) {
    this.fetchResults();
  }
}