当前位置：首页 > VUE

vue实现点击筛选

2026-01-15 05:01:48VUE

实现点击筛选功能

在Vue中实现点击筛选功能通常涉及数据绑定和事件处理。以下是一个常见的实现方法：

模板部分

<template>
  <div>
    <div class="filter-buttons">
      <button 
        v-for="category in categories" 
        :key="category"
        @click="filterItems(category)"
        :class="{ active: activeCategory === category }"
      >
        {{ category }}
      </button>
    </div>

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

脚本部分

<script>
export default {
  data() {
    return {
      activeCategory: 'all',
      categories: ['all', 'category1', 'category2', 'category3'],
      items: [
        { id: 1, name: 'Item 1', category: 'category1' },
        { id: 2, name: 'Item 2', category: 'category2' },
        { id: 3, name: 'Item 3', category: 'category1' },
        { id: 4, name: 'Item 4', category: 'category3' }
      ]
    }
  },
  computed: {
    filteredItems() {
      if (this.activeCategory === 'all') {
        return this.items
      }
      return this.items.filter(item => item.category === this.activeCategory)
    }
  },
  methods: {
    filterItems(category) {
      this.activeCategory = category
    }
  }
}
</script>

样式处理

为选中的筛选按钮添加视觉反馈：

<style>
.filter-buttons button {
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
}

.filter-buttons button.active {
  background-color: #42b983;
  color: white;
}
</style>

高级筛选实现

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

data() {
  return {
    filters: {
      category: null,
      priceRange: null,
      availability: null
    }
  }
},
computed: {
  filteredProducts() {
    return this.products.filter(product => {
      return (
        (!this.filters.category || product.category === this.filters.category) &&
        (!this.filters.priceRange || 
          (product.price >= this.filters.priceRange[0] && 
           product.price <= this.filters.priceRange[1])) &&
        (!this.filters.availability || product.stock > 0)
      )
    })
  }
}

使用Vuex管理筛选状态

在大型应用中，可以使用Vuex集中管理筛选状态：

// store.js
const store = new Vuex.Store({
  state: {
    filter: {
      category: 'all'
    }
  },
  mutations: {
    setFilter(state, payload) {
      state.filter = { ...state.filter, ...payload }
    }
  },
  getters: {
    filteredItems: state => {
      if (state.filter.category === 'all') {
        return state.items
      }
      return state.items.filter(item => item.category === state.filter.category)
    }
  }
})

组件中通过mapGetters和mapMutations访问：

import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['filteredItems'])
  },
  methods: {
    ...mapMutations(['setFilter']),
    handleFilter(category) {
      this.setFilter({ category })
    }
  }
}

以上方法提供了从基础到进阶的Vue点击筛选实现方案，可根据具体需求选择适合的方式。

vue实现点击筛选