当前位置：首页 > VUE

vue实现搜索筛选

2026-01-17 05:48:14VUE

实现搜索筛选的基本思路

在Vue中实现搜索筛选功能，通常需要结合数据绑定、计算属性和事件监听。核心是通过用户输入的关键词过滤原始数据列表，动态展示匹配项。

数据准备与绑定

创建一个包含所有数据的数组和一个用于存储搜索关键词的变量。在模板中使用v-model绑定输入框与关键词变量。

vue实现搜索筛选

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

计算属性实现筛选

利用计算属性filteredItems动态返回符合搜索条件的数据。通过filter方法遍历原始数据，检查每一项是否包含关键词（不区分大小写）。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

多条件筛选扩展

若需支持多个字段（如名称和描述）或更复杂的条件，可扩展计算属性逻辑。例如同时匹配名称和描述字段：

vue实现搜索筛选

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

性能优化建议

对于大数据量场景，可考虑以下优化：

添加防抖（debounce）减少频繁触发筛选
使用Web Worker进行后台过滤
对静态数据预先建立索引

完整示例代码

结合上述要点，一个完整的Vue单文件组件示例如下：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="输入关键词..."
      class="search-input"
    >
    <ul v-if="filteredItems.length">
      <li 
        v-for="item in filteredItems" 
        :key="item.id"
        class="item"
      >
        {{ item.name }} - {{ item.description }}
      </li>
    </ul>
    <p v-else>无匹配结果</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Vue', description: '渐进式JavaScript框架' },
        { id: 2, name: 'React', description: '用于构建用户界面的库' },
        { id: 3, name: 'Angular', description: '企业级前端框架' }
      ]
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item => 
        item.name.toLowerCase().includes(query) || 
        item.description.toLowerCase().includes(query)
      )
    }
  }
}
</script>

<style>
.search-input {
  padding: 8px;
  width: 200px;
}
.item {
  padding: 4px 0;
}
</style>

标签: vue