当前位置：首页 > VUE

vue 实现筛选

2026-01-12 23:03:27VUE

Vue 实现筛选功能的方法

在 Vue 中实现筛选功能可以通过多种方式，以下是几种常见的方法：

使用计算属性

计算属性非常适合处理筛选逻辑，因为它们会根据依赖的数据自动更新。定义一个计算属性来返回筛选后的数据列表。

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

使用 v-for 和 v-if

直接在模板中使用 v-for 和 v-if 结合来实现筛选，但需要注意性能问题，因为 v-if 会为每个元素创建和销毁 DOM 节点。

<div v-for="item in items" v-if="item.name.includes(searchTerm)">
  {{ item.name }}
</div>

使用方法进行筛选

定义一个方法来处理筛选逻辑，然后在需要的时候调用这个方法。

methods: {
  filterItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
    })
  }
}

使用 Vuex 进行状态管理

在大型应用中，可以使用 Vuex 来管理筛选状态和逻辑。

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

使用第三方库

可以使用 lodash 的 _.filter 或其他工具库来简化筛选逻辑。

import _ from 'lodash'

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

动态筛选多个条件

如果需要根据多个条件进行筛选，可以扩展筛选逻辑。

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(this.searchTerm.toLowerCase())
      const matchesCategory = this.selectedCategory ? item.category === this.selectedCategory : true
      return matchesSearch && matchesCategory
    })
  }
}

使用自定义筛选函数

对于复杂的筛选需求，可以定义自定义筛选函数。

methods: {
  customFilter(item) {
    // 自定义筛选逻辑
    return item.price > this.minPrice && item.price < this.maxPrice
  }
}

实时搜索

结合 v-model 和 @input 事件实现实时搜索。

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

分页筛选

在筛选结果上实现分页功能。

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

使用过滤器

Vue 2.x 中可以使用过滤器来实现筛选，但 Vue 3.x 已移除过滤器，建议使用计算属性或方法替代。

// Vue 2.x
filters: {
  filterByName(value, searchTerm) {
    return value.filter(item => {
      return item.name.toLowerCase().includes(searchTerm.toLowerCase())
    })
  }
}

以上方法可以根据具体需求选择使用，计算属性是最推荐的方式，因为它能自动缓存结果，提高性能。

vue 实现筛选