当前位置：首页 > VUE

vue实现数据过滤

2026-01-18 15:52:38VUE

Vue 数据过滤的实现方法

在 Vue 中实现数据过滤可以通过多种方式，以下是几种常见的实现方法：

使用计算属性（Computed Properties）

计算属性是 Vue 中最常用的数据过滤方式，适用于基于现有数据生成新的数据集合。计算属性会缓存结果，只有在依赖的数据发生变化时才会重新计算。

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

使用方法（Methods）

方法也可以用于数据过滤，但每次调用都会重新计算，适合需要动态参数的场景。

vue实现数据过滤

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

使用过滤器（Filters）

Vue 2.x 提供了过滤器功能，可以在模板中直接使用。Vue 3.x 已移除过滤器，建议使用计算属性或方法替代。

// Vue 2.x
export default {
  filters: {
    capitalize(value) {
      if (!value) return ''
      return value.toString().charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

使用第三方库

对于复杂的数据过滤需求，可以考虑使用 Lodash 等工具库提供的强大过滤功能。

vue实现数据过滤

import _ from 'lodash'

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

结合 v-for 指令

在模板中可以直接结合计算属性或方法使用 v-for 渲染过滤后的数据。

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

服务器端过滤

对于大数据集，建议将过滤逻辑放在服务器端，通过 API 请求获取过滤后的数据。

export default {
  methods: {
    async fetchFilteredData(filter) {
      const response = await axios.get('/api/items', { params: { filter } })
      this.filteredItems = response.data
    }
  }
}