当前位置：首页 > VUE

vue实现点击筛选

2026-03-08 07:41:47VUE

实现点击筛选功能

在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实现高亮

为筛选按钮添加动态class，显示当前选中的筛选条件。

<template>
  <div>
    <button 
      @click="filterByCategory('all')" 
      :class="{ active: currentFilter === 'all' }"
    >全部</button>
    <button 
      @click="filterByCategory('category1')" 
      :class="{ active: currentFilter === 'category1' }"
    >分类1</button>
    <button 
      @click="filterByCategory('category2')" 
      :class="{ active: currentFilter === 'category2' }"
    >分类2</button>
  </div>
</template>

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

使用Vuex管理筛选状态

对于大型应用，可以使用Vuex集中管理筛选状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '项目1', category: 'category1' },
      { id: 2, name: '项目2', category: 'category2' },
      { id: 3, name: '项目3', category: 'category1' }
    ],
    currentFilter: 'all'
  },
  mutations: {
    setFilter(state, filter) {
      state.currentFilter = filter
    }
  },
  getters: {
    filteredItems: state => {
      if (state.currentFilter === 'all') {
        return state.items
      }
      return state.items.filter(item => item.category === state.currentFilter)
    }
  }
})

组件中使用Vuex筛选

vue实现点击筛选

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

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

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['filteredItems'])
  },
  methods: {
    ...mapMutations(['setFilter'])
  }
}
</script>

以上方法可以根据项目需求选择适合的实现方式。计算属性和Vuex getters都能高效地处理数据筛选，避免不必要的重复计算。

标签: vue