当前位置：首页 > VUE

vue实现条件筛选

2026-02-19 20:57:54VUE

条件筛选的实现方法

在Vue中实现条件筛选通常涉及数据绑定、计算属性和方法调用。以下是几种常见的实现方式：

使用计算属性进行筛选

计算属性是Vue中实现条件筛选最简洁的方式：

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return (
        (this.filter.category === '' || item.category === this.filter.category) &&
        (this.filter.price === '' || item.price <= this.filter.price)
      )
    })
  }
}

基于v-model的双向绑定

通过v-model绑定筛选条件到表单元素：

<input v-model="filter.keyword" placeholder="搜索关键词">
<select v-model="filter.category">
  <option value="">所有分类</option>
  <option value="electronics">电子产品</option>
</select>

方法触发式筛选

当需要更复杂的筛选逻辑或异步操作时，可以使用方法：

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

使用watch监听筛选条件变化

当筛选条件变化时需要执行额外操作：

watch: {
  'filter.keyword'(newVal) {
    this.debouncedFilter()
  }
}

性能优化技巧

对于大型数据集，筛选操作可能影响性能，可考虑以下优化：

分页加载

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

防抖处理

created() {
  this.debouncedFilter = _.debounce(this.applyFilters, 500)
}

虚拟滚动

对于超长列表，可使用vue-virtual-scroller等库实现虚拟滚动。

vue实现条件筛选

完整示例代码

<template>
  <div>
    <input v-model="filter.text" placeholder="搜索">
    <select v-model="filter.category">
      <option value="">所有分类</option>
      <option v-for="cat in categories" :value="cat">{{cat}}</option>
    </select>

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

<script>
export default {
  data() {
    return {
      items: [...],
      filter: {
        text: '',
        category: ''
      }
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const matchesText = item.name.includes(this.filter.text)
        const matchesCategory = !this.filter.category || 
                              item.category === this.filter.category
        return matchesText && matchesCategory
      })
    }
  }
}
</script>

以上方法可根据具体需求组合使用，计算属性适合简单同步筛选，方法调用适合复杂或异步操作，watch适合需要响应式处理的场景。