当前位置：首页 > VUE

vue怎么实现筛选功能

2026-01-22 18:26:35VUE

实现筛选功能的基本思路

在Vue中实现筛选功能通常涉及以下几个核心步骤：数据绑定、筛选逻辑处理和结果渲染。以下是具体实现方法。

使用计算属性实现筛选

计算属性是Vue中实现筛选功能的常见方式，适合对数据进行动态过滤。

vue怎么实现筛选功能

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <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: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

使用watch监听筛选条件

当筛选逻辑较复杂或需要异步操作时，可以使用watch监听筛选条件的变化。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: [],
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    };
  },
  watch: {
    searchQuery(newVal) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      );
    }
  },
  created() {
    this.filteredItems = this.items;
  }
};
</script>

多条件筛选的实现

对于需要多个筛选条件的场景，可以通过组合计算属性或方法实现。

vue怎么实现筛选功能

<template>
  <div>
    <input v-model="searchQuery" placeholder="名称搜索">
    <select v-model="selectedCategory">
      <option value="">所有分类</option>
      <option value="fruit">水果</option>
      <option value="vegetable">蔬菜</option>
    </select>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedCategory: '',
      items: [
        { id: 1, name: '苹果', category: 'fruit' },
        { id: 2, name: '香蕉', category: 'fruit' },
        { id: 3, name: '胡萝卜', category: 'vegetable' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const nameMatch = item.name.toLowerCase().includes(this.searchQuery.toLowerCase());
        const categoryMatch = this.selectedCategory === '' || item.category === this.selectedCategory;
        return nameMatch && categoryMatch;
      });
    }
  }
};
</script>

使用第三方库增强筛选功能

对于复杂筛选需求，可以考虑使用lodash等工具库的debounce或高级过滤功能。

import _ from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      items: [...]
    };
  },
  computed: {
    filteredItems() {
      return _.filter(this.items, item => 
        _.includes(item.name.toLowerCase(), this.searchQuery.toLowerCase())
      );
    }
  }
};

服务器端筛选的实现

当数据量较大时，可以将筛选逻辑移到服务器端，通过API请求获取筛选结果。

methods: {
  async fetchFilteredItems() {
    const response = await axios.get('/api/items', {
      params: {
        search: this.searchQuery,
        category: this.selectedCategory
      }
    });
    this.filteredItems = response.data;
  }
},
watch: {
  searchQuery: _.debounce(function() {
    this.fetchFilteredItems();
  }, 500)
}