当前位置：首页 > VUE

vue实现点击筛选

2026-02-11 07:59:36VUE

实现点击筛选功能

在Vue中实现点击筛选功能通常涉及数据绑定、事件处理和条件渲染。以下是几种常见方法：

基于v-for和v-if的筛选

利用计算属性对数据进行筛选，通过点击事件切换筛选条件：

<template>
  <div>
    <button @click="filterByCategory('all')">全部</button>
    <button @click="filterByCategory('category1')">分类1</button>
    <button @click="filterByCategory('category2')">分类2</button>

    <div v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1', category: 'category1' },
        { id: 2, name: '项目2', category: 'category2' },
        { id: 3, name: '项目3', category: 'category1' }
      ],
      currentFilter: 'all'
    }
  },
  computed: {
    filteredItems() {
      if (this.currentFilter === 'all') {
        return this.items
      }
      return this.items.filter(item => item.category === this.currentFilter)
    }
  },
  methods: {
    filterByCategory(category) {
      this.currentFilter = category
    }
  }
}
</script>

使用动态class实现样式筛选

对于简单的UI筛选效果，可以结合动态class和CSS：

<template>
  <div>
    <button 
      @click="activeFilter = 'all'"
      :class="{ active: activeFilter === 'all' }"
    >全部</button>
    <button 
      @click="activeFilter = 'featured'"
      :class="{ active: activeFilter === 'featured' }"
    >精选</button>

    <div 
      v-for="item in items" 
      :key="item.id"
      :class="{ hidden: activeFilter !== 'all' && activeFilter !== item.type }"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<style>
.hidden {
  display: none;
}
.active {
  background-color: #42b983;
  color: white;
}
</style>

多条件复合筛选

对于更复杂的筛选需求，可以使用多个筛选条件：

<template>
  <div>
    <input v-model="searchText" placeholder="搜索...">
    <select v-model="selectedCategory">
      <option value="">所有分类</option>
      <option value="electronics">电子产品</option>
      <option value="clothing">服装</option>
    </select>
    <input type="range" v-model="priceRange" min="0" max="1000">

    <div v-for="item in filteredProducts" :key="item.id">
      {{ item.name }} - {{ item.price }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      searchText: '',
      selectedCategory: '',
      priceRange: 500
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        const matchesSearch = product.name.toLowerCase().includes(this.searchText.toLowerCase())
        const matchesCategory = !this.selectedCategory || product.category === this.selectedCategory
        const matchesPrice = product.price <= this.priceRange
        return matchesSearch && matchesCategory && matchesPrice
      })
    }
  }
}
</script>

使用第三方库实现高级筛选

对于大型项目，可以考虑使用专门的筛选库如vue-filter或自行封装筛选组件：

<template>
  <div>
    <filter-component 
      :filters="filters" 
      @filter-change="handleFilterChange"
    />

    <product-list :products="filteredProducts" />
  </div>
</template>

<script>
import FilterComponent from './FilterComponent.vue'
import ProductList from './ProductList.vue'

export default {
  components: { FilterComponent, ProductList },
  data() {
    return {
      activeFilters: {},
      filters: [
        { id: 'category', type: 'select', options: ['电子', '服装', '家居'] },
        { id: 'price', type: 'range', min: 0, max: 1000 }
      ]
    }
  },
  computed: {
    filteredProducts() {
      // 实现筛选逻辑
    }
  },
  methods: {
    handleFilterChange(newFilters) {
      this.activeFilters = newFilters
    }
  }
}
</script>