vue前端实现筛选功能

Vue前端实现筛选功能可以通过以下步骤实现：

1. 定义一个数据列表，例如：

data() {
  return {
    items: [
      { id: 1, name: 'Apple', type: 'fruit' },
      { id: 2, name: 'Banana', type: 'fruit' },
      { id: 3, name: 'Carrot', type: 'vegetable' },
      { id: 4, name: 'Tomato', type: 'vegetable' },
    ],
    filteredItems: [],
    filterType: '',
  };
},

2. 定义一个筛选方法，例如：

methods: {
  filter() {
    this.filteredItems = this.items.filter(item => {
      if (this.filterType) {
        return item.type === this.filterType;
      }
      return true;
    });
  },
},

3. 在模板中添加筛选条件和结果展示，例如：

<template>
  <div>
    <select v-model="filterType" @change="filter">
      <option value="">All</option>
      <option value="fruit">Fruit</option>
      <option value="vegetable">Vegetable</option>
    </select>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

这样就可以实现根据类型筛选数据的功能。