当前位置：首页 > VUE

vue分类功能实现

2026-01-17 04:25:45VUE

Vue分类功能实现方法

使用v-for指令渲染分类列表 在Vue模板中使用v-for循环渲染分类数据，结合v-bind动态绑定分类ID或其他属性

<div v-for="category in categories" :key="category.id">
  {{ category.name }}
</div>

组件化分类项 创建可复用的分类组件，通过props接收分类数据

Vue.component('category-item', {
  props: ['category'],
  template: `<div>{{ category.name }}</div>`
})

实现分类筛选 使用计算属性根据当前分类筛选内容

computed: {
  filteredItems() {
    return this.items.filter(item => 
      this.selectedCategory === null || 
      item.category === this.selectedCategory
    )
  }
}

添加分类切换交互 通过v-on绑定点击事件切换当前分类

<button 
  v-for="cat in categories" 
  :key="cat.id"
  @click="selectCategory(cat.id)"
>
  {{ cat.name }}
</button>

使用Vuex管理分类状态 对于大型应用，使用Vuex集中管理分类数据

const store = new Vuex.Store({
  state: {
    categories: [],
    currentCategory: null
  },
  mutations: {
    setCategories(state, categories) {
      state.categories = categories
    }
  }
})

分类数据获取 在created生命周期钩子中获取分类数据

created() {
  axios.get('/api/categories')
    .then(response => {
      this.categories = response.data
    })
}

响应式分类样式 使用动态class绑定当前选中分类的样式

<div 
  v-for="cat in categories"
  :class="{ 'active': cat.id === currentCategory }"
>
  {{ cat.name }}
</div>

嵌套分类实现 对于多级分类，使用递归组件实现

Vue.component('category-tree', {
  props: ['categories'],
  template: `
    <ul>
      <li v-for="cat in categories" :key="cat.id">
        {{ cat.name }}
        <category-tree 
          v-if="cat.children" 
          :categories="cat.children"
        />
      </li>
    </ul>
  `
})

vue分类功能实现