vue实现点击筛选

实现点击筛选功能

在Vue中实现点击筛选功能可以通过以下步骤完成：

1. 准备数据 创建需要筛选的数据数组和筛选条件变量。

data() {
  return {
    items: [
      { id: 1, name: 'Apple', category: 'fruit' },
      { id: 2, name: 'Carrot', category: 'vegetable' },
      { id: 3, name: 'Banana', category: 'fruit' }
    ],
    selectedCategory: 'all'
  }
}

1. 创建筛选方法 添加计算属性来处理筛选逻辑。

computed: {
  filteredItems() {
    if (this.selectedCategory === 'all') {
      return this.items
    }
    return this.items.filter(item => item.category === this.selectedCategory)
  }
}

1. 创建筛选按钮 在模板中添加筛选按钮并绑定点击事件。

<div>
  <button @click="selectedCategory = 'all'">All</button>
  <button @click="selectedCategory = 'fruit'">Fruits</button>
  <button @click="selectedCategory = 'vegetable'">Vegetables</button>
</div>

1. 显示筛选结果 使用v-for指令显示筛选后的结果。

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }} ({{ item.category }})
  </li>
</ul>

动态筛选选项实现

如果需要动态生成筛选按钮：

data() {
  return {
    // ...其他数据
    categories: ['all', 'fruit', 'vegetable']
  }
}

<div>
  <button 
    v-for="category in categories" 
    :key="category"
    @click="selectedCategory = category"
  >
    {{ category }}
  </button>
</div>

添加样式反馈

为当前选中的筛选按钮添加样式反馈：

<button 
  v-for="category in categories" 
  :key="category"
  @click="selectedCategory = category"
  :class="{ active: selectedCategory === category }"
>
  {{ category }}
</button>

.active {
  background-color: #42b983;
  color: white;
}

多条件筛选实现

如果需要实现多条件筛选：

data() {
  return {
    filters: {
      category: 'all',
      priceRange: 'all'
    }
  }
},
computed: {
  filteredItems() {
    return this.items.filter(item => {
      const categoryMatch = this.filters.category === 'all' || 
                          item.category === this.filters.category
      const priceMatch = this.filters.priceRange === 'all' || 
                        this.checkPriceRange(item.price)
      return categoryMatch && priceMatch
    })
  }
}