当前位置：首页 > VUE

vue筛选实现

2026-03-07 03:31:32VUE

Vue 筛选实现方法

使用计算属性实现筛选

计算属性是Vue中实现数据筛选的常用方式，通过依赖响应式数据自动更新筛选结果。

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

使用v-for渲染筛选结果

在模板中直接使用计算属性渲染筛选后的列表。

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

结合表单输入实现动态筛选

通过v-model绑定输入框实现实时筛选。

vue筛选实现

<input v-model="searchText" placeholder="搜索...">

多条件筛选实现

可以扩展筛选逻辑实现多条件查询。

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

使用methods实现复杂筛选

对于更复杂的筛选逻辑，可以使用methods替代计算属性。

vue筛选实现

methods: {
  filterItems() {
    return this.items.filter(item => {
      // 复杂筛选逻辑
    })
  }
}

性能优化技巧

对于大型数据集，可以考虑以下优化：

添加防抖处理输入变化
使用虚拟滚动渲染长列表
考虑分页加载数据

第三方库辅助筛选

对于复杂需求，可以使用lodash等工具库的筛选方法。

import _ from 'lodash'

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