当前位置：首页 > VUE

vue实现搜索筛选

2026-03-29 22:36:09VUE

实现搜索筛选的基本思路

在Vue中实现搜索筛选功能通常需要结合v-model绑定输入框数据，通过计算属性或方法动态过滤列表数据。核心逻辑包括数据绑定、过滤条件和渲染展示。

数据准备与绑定

定义数据 在Vue组件的data中初始化列表数据和搜索关键词：

data() {
  return {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple', category: 'Fruit' },
      { id: 2, name: 'Carrot', category: 'Vegetable' }
    ]
  }
}

绑定输入框 使用v-model实现双向绑定：

<input v-model="searchQuery" placeholder="Search...">

实现筛选逻辑

计算属性过滤 通过computed属性动态计算筛选结果，避免直接修改原数据：

vue实现搜索筛选

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

多条件筛选 若需支持多字段筛选，可扩展过滤逻辑：

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

渲染筛选结果

列表渲染 使用v-for绑定计算后的结果：

vue实现搜索筛选

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

空状态处理 添加无结果时的提示：

<p v-if="filteredItems.length === 0">No matching items found.</p>

高级优化

防抖处理 通过lodash.debounce减少频繁触发：

methods: {
  handleSearch: _.debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

分页支持 结合分页组件控制显示范围：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.filteredItems.slice(start, start + this.pageSize)
  }
}

完整示例代码

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="Search by name or category"
    >
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} - {{ item.category }}
      </li>
    </ul>
    <p v-else>No results found.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        /* 原始数据 */
      ]
    }
  },
  computed: {
    filteredItems() {
      const query = this.searchQuery.toLowerCase()
      return this.items.filter(item =>
        item.name.toLowerCase().includes(query) ||
        item.category.toLowerCase().includes(query)
      )
    }
  }
}
</script>

标签: vue