vue 过滤数据

在 Vue.js 中，过滤数据通常指的是对列表或数组中的数据进行筛选，以显示满足特定条件的数据。Vue 2.x 版本中曾经支持过滤器（filters），但在 Vue 3 中已经移除了这一特性，并推荐使用计算属性（computed properties）或者方法（methods）来处理数据的过滤。

以下是一些常见的方法来实现数据过滤：

使用计算属性

计算属性非常适合用来处理依赖于其他数据的数据变换。当依赖的数据发生变化时，计算属性会重新计算其值。

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

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

使用方法

如果逻辑较为复杂，可能更适合放在方法里处理。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ],
      searchText: '',
      displayedItems: []
    };
  },
  methods: {
    filterItems() {
      this.displayedItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchText.toLowerCase())
      );
    }
  },
  created() {
    // 初始化时复制原始数据到displayedItems
    this.displayedItems = [...this.items];
  }
};
</script>

使用外部库

对于更复杂的过滤需求，可以考虑使用如 lodash 这样的外部库，它提供了很多方便的方法来处理数组和对象。

无论你选择哪种方式，关键点在于根据你的具体需求来决定如何组织代码。如果你需要实时响应用户的输入并更新视图，那么计算属性可能是更好的选择。如果你的过滤逻辑比较复杂，或者不需要实时更新，那么使用方法可能更加合适。