当前位置：首页 > VUE

vue实现动态筛选

2026-01-17 15:49:51VUE

Vue实现动态筛选的方法

动态筛选是Vue应用中常见的功能需求，可以通过多种方式实现。以下是几种常用的实现方法：

使用计算属性实现筛选

计算属性是Vue中实现动态筛选的理想选择，它会根据依赖的数据自动更新：

data() {
  return {
    items: [...], // 原始数据数组
    searchQuery: '' // 筛选条件
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      return item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

在模板中使用：

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

使用watch实现复杂筛选

对于需要异步操作或更复杂的筛选逻辑，可以使用watch：

data() {
  return {
    items: [...],
    filteredItems: [],
    searchQuery: '',
    category: ''
  }
},
watch: {
  searchQuery(newVal) {
    this.filterItems()
  },
  category(newVal) {
    this.filterItems()
  }
},
methods: {
  filterItems() {
    // 复杂的筛选逻辑
    this.filteredItems = this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      const matchesCategory = this.category ? item.category === this.category : true
      return matchesSearch && matchesCategory
    })
  }
}

使用Vuex实现全局筛选

对于大型应用，可以使用Vuex管理筛选状态：

// store.js
state: {
  items: [...],
  filters: {
    searchQuery: '',
    category: ''
  }
},
getters: {
  filteredItems: (state) => {
    return state.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(state.filters.searchQuery.toLowerCase())
      const matchesCategory = state.filters.category ? item.category === state.filters.category : true
      return matchesSearch && matchesCategory
    })
  }
}

在组件中使用：

computed: {
  ...mapGetters(['filteredItems']),
  searchQuery: {
    get() {
      return this.$store.state.filters.searchQuery
    },
    set(value) {
      this.$store.commit('updateSearchQuery', value)
    }
  }
}

使用第三方库实现高级筛选

对于更复杂的需求，可以考虑使用lodash等工具库：

import _ from 'lodash'

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

实现多条件筛选

对于多条件筛选，可以构建更复杂的筛选函数：

computed: {
  filteredItems() {
    let result = this.items

    if (this.searchQuery) {
      result = result.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }

    if (this.selectedCategory) {
      result = result.filter(item => 
        item.category === this.selectedCategory
      )
    }

    if (this.priceRange) {
      result = result.filter(item => 
        item.price >= this.priceRange[0] && item.price <= this.priceRange[1]
      )
    }

    return result
  }
}

以上方法可以根据具体需求组合使用，实现灵活的动态筛选功能。

vue实现动态筛选