vue 实现筛选

Vue 实现筛选功能的方法

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

使用计算属性实现筛选

计算属性是 Vue 中处理数据筛选的理想方式，因为它会自动缓存结果，只在依赖数据变化时重新计算。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 v-for 和 v-if 结合实现筛选

虽然不推荐在同一元素上同时使用 v-for 和 v-if，但可以通过包裹元素实现筛选。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <template v-for="item in items">
        <li v-if="item.name.toLowerCase().includes(searchQuery.toLowerCase())" :key="item.id">
          {{ item.name }}
        </li>
      </template>
    </ul>
  </div>
</template>

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

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

import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple', category: 'fruit' },
        { id: 2, name: 'Banana', category: 'fruit' },
        { id: 3, name: 'Carrot', category: 'vegetable' }
      ],
      selectedCategory: ''
    }
  },
  computed: {
    filteredItems() {
      let result = this.items
      if (this.searchQuery) {
        result = _.filter(result, item => 
          item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
      }
      if (this.selectedCategory) {
        result = _.filter(result, { category: this.selectedCategory })
      }
      return result
    }
  }
}

使用 Vuex 管理筛选状态

在大型应用中，可以使用 Vuex 集中管理筛选状态。

// store.js
export default new Vuex.Store({
  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
        return matchesSearch && matchesCategory
      })
    }
  }
})

使用自定义筛选指令

对于需要复用的筛选逻辑，可以创建自定义指令。

Vue.directive('filter', {
  bind(el, binding, vnode) {
    const filterFn = binding.value
    const items = vnode.context.items
    vnode.context.filteredItems = items.filter(filterFn)
  },
  update(el, binding, vnode) {
    const filterFn = binding.value
    const items = vnode.context.items
    vnode.context.filteredItems = items.filter(filterFn)
  }
})

每种方法都有其适用场景，计算属性方式适合大多数简单筛选需求，而 Vuex 方案更适合大型应用的状态管理。根据项目复杂度和需求选择最合适的方法。