Vue项目数据动态过滤实践

在Vue项目中实现数据动态过滤是一个常见的需求，通常用于根据用户输入或选择来改变数据显示的内容。这可以通过Vue的计算属性(computed properties)、方法(methods)以及筛选器(filters)（Vue 2.x中使用，Vue 3.x已移除官方支持，推荐使用计算属性和方法）来完成。下面我将分别介绍Vue 2.x和Vue 3.x中如何实践数据动态过滤。

Vue 2.x

1. 使用计算属性: 计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时才会重新计算。这对于数据过滤非常有用。

   // 假设data中有列表items和一个筛选关键词filterText
   data() {
    return {
      items: [
        { text: 'Apple', category: 'fruit' },
        { text: 'Banana', category: 'fruit' },
        { text: 'Carrot', category: 'vegetable' }
      ],
      filterText: ''
    };
   },
   computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.text.toLowerCase().includes(this.filterText.toLowerCase())
      );
    }
   }
   

   在模板中直接使用filteredItems:

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

2. 使用自定义筛选器 (虽然不推荐新项目使用，但了解也无妨):

   filters: {
    filterByCategory(items, category) {
      return items.filter(item => item.category === category);
    }
   }
   

   使用方式：

   <ul>
    <li v-for="item in items | filterByCategory('fruit')" :key="item.text">{{ item.text }}</li>
   </ul>
   

Vue 3.x

在Vue 3中，由于官方不再推荐使用过滤器，你可以通过计算属性和方法来实现相同的功能。

1. 使用计算属性:

   与Vue 2类似，但使用Composition API：

   setup(props, { emit }) {
    const items = ref([
      { text: 'Apple', category: 'fruit' },
      { text: 'Banana', category: 'fruit' },
      { text: 'Carrot', category: 'vegetable' }
    ]);
    const filterText = ref('');
   
    const filteredItems = computed(() => 
      items.value.filter(item => 
        item.text.toLowerCase().includes(filterText.value.toLowerCase())
      )
    );
   
    return { items, filterText, filteredItems };
   }
   

2. 使用方法:

   如果你的过滤逻辑更复杂，也可以封装成一个方法并在需要时调用。

   methods: {
    filterItems(category) {
      return this.items.filter(item => item.category === category);
    }
   }
   

   或者在Vue 3的Composition API中：

   const filterItems = (category) => items.value.filter(item => item.category === category);
   

然后在模板中绑定和使用这些计算属性或方法即可实现数据的动态过滤。记得处理好用户的输入变化，比如通过v-model绑定到filterText上，以实时更新过滤结果。