当前位置：首页 > VUE

vue 2.0 实现filterby

2026-01-18 14:25:26VUE

Vue 2.0 实现 `filterBy` 功能

在 Vue 2.0 中，官方不再推荐使用 filterBy 过滤器，而是建议使用计算属性或方法来实现类似功能。以下是几种实现方式：

使用计算属性实现过滤

计算属性是 Vue 中处理数据过滤的最佳实践之一。通过计算属性，可以动态地过滤数组数据。

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Apple', category: 'fruit' },
      { name: 'Carrot', category: 'vegetable' },
      { name: 'Banana', category: 'fruit' }
    ],
    searchQuery: ''
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
});

使用方法实现过滤

如果需要在模板中直接调用方法进行过滤，可以定义一个方法并在模板中使用。

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Apple', category: 'fruit' },
      { name: 'Carrot', category: 'vegetable' },
      { name: 'Banana', category: 'fruit' }
    ],
    searchQuery: ''
  },
  methods: {
    filterItems(items, query) {
      return items.filter(item => 
        item.name.toLowerCase().includes(query.toLowerCase())
      );
    }
  }
});

在模板中调用方法：

<div v-for="item in filterItems(items, searchQuery)">
  {{ item.name }}
</div>

使用自定义过滤器

虽然 Vue 2.0 不推荐使用 filterBy，但仍然可以通过自定义过滤器实现类似功能。

Vue.filter('filterBy', function (items, query) {
  return items.filter(item => 
    item.name.toLowerCase().includes(query.toLowerCase())
  );
});

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Apple', category: 'fruit' },
      { name: 'Carrot', category: 'vegetable' },
      { name: 'Banana', category: 'fruit' }
    ],
    searchQuery: ''
  }
});

在模板中使用自定义过滤器：

<div v-for="item in items | filterBy searchQuery">
  {{ item.name }}
</div>

使用 Lodash 或第三方库

如果需要更复杂的过滤功能，可以使用 Lodash 或其他第三方库。

vue 2.0 实现filterby

import _ from 'lodash';

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Apple', category: 'fruit' },
      { name: 'Carrot', category: 'vegetable' },
      { name: 'Banana', category: 'fruit' }
    ],
    searchQuery: ''
  },
  computed: {
    filteredItems() {
      return _.filter(this.items, item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
});

以上方法可以根据具体需求选择使用。计算属性是推荐的方式，因为它能更好地利用 Vue 的响应式系统。