当前位置：首页 > VUE

vue实现点击分类

2026-03-09 23:10:43VUE

实现点击分类功能的方法

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

使用v-for和v-on指令

通过v-for循环渲染分类列表，结合v-on监听点击事件，动态切换当前选中分类：

<template>
  <div>
    <div 
      v-for="category in categories" 
      :key="category.id"
      @click="selectCategory(category)"
      :class="{ 'active': selectedCategory === category }"
    >
      {{ category.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '分类1' },
        { id: 2, name: '分类2' },
        { id: 3, name: '分类3' }
      ],
      selectedCategory: null
    }
  },
  methods: {
    selectCategory(category) {
      this.selectedCategory = category
    }
  }
}
</script>

<style>
.active {
  background-color: #eee;
}
</style>

使用计算属性过滤内容

vue实现点击分类

当分类需要关联显示对应内容时，可结合计算属性实现：

<template>
  <div>
    <button 
      v-for="type in types" 
      :key="type"
      @click="currentType = type"
    >
      {{ type }}
    </button>

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

<script>
export default {
  data() {
    return {
      types: ['全部', '类型A', '类型B'],
      currentType: '全部',
      items: [
        { id: 1, name: '项目1', type: '类型A' },
        { id: 2, name: '项目2', type: '类型B' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.currentType === '全部' 
        ? this.items 
        : this.items.filter(item => item.type === this.currentType)
    }
  }
}
</script>

使用路由参数实现分类

对于SPA应用，可通过路由参数管理分类状态：

vue实现点击分类

// router.js
{
  path: '/category/:id',
  component: CategoryPage
}

<template>
  <router-link 
    v-for="cat in categories"
    :key="cat.id"
    :to="'/category/' + cat.id"
  >
    {{ cat.name }}
  </router-link>
</template>

使用Vuex管理分类状态

对于复杂应用，建议使用Vuex集中管理分类状态：

// store.js
export default new Vuex.Store({
  state: {
    currentCategory: null,
    categories: []
  },
  mutations: {
    SET_CATEGORY(state, category) {
      state.currentCategory = category
    }
  }
})

<template>
  <div @click="setCategory(category)" v-for="category in categories">
    {{ category.name }}
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    categories() {
      return this.$store.state.categories
    }
  },
  methods: {
    ...mapMutations(['SET_CATEGORY']),
    setCategory(category) {
      this.SET_CATEGORY(category)
    }
  }
}
</script>