当前位置：首页 > VUE

vue实现分类点击

2026-03-28 21:03:39VUE

Vue 实现分类点击功能

分类点击功能通常涉及数据分组、动态渲染和事件处理。以下是实现步骤：

数据结构设计

使用数组存储分类数据，每个分类包含名称和子项列表：

data() {
  return {
    categories: [
      {
        name: '电子产品',
        items: ['手机', '笔记本', '平板']
      },
      {
        name: '家居',
        items: ['沙发', '床', '餐桌']
      }
    ],
    activeCategory: null
  }
}

模板渲染

使用 v-for 循环渲染分类按钮和内容：

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

<div v-if="activeCategory" class="items-list">
  <div v-for="item in activeCategory.items" :key="item">
    {{ item }}
  </div>
</div>

事件处理

添加点击事件处理方法：

methods: {
  selectCategory(category) {
    this.activeCategory = category
  }
}

样式优化

添加基础CSS增强交互体验：

.category-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.category-buttons button {
  padding: 8px 16px;
  cursor: pointer;
}
.category-buttons button.active {
  background-color: #42b983;
  color: white;
}
.items-list {
  border: 1px solid #eee;
  padding: 15px;
}

动态高亮实现

通过计算属性实现自动高亮：

computed: {
  activeCategoryIndex() {
    return this.categories.findIndex(
      cat => cat === this.activeCategory
    )
  }
}

响应式更新

如果需要异步加载分类数据：

async created() {
  try {
    const response = await fetch('/api/categories')
    this.categories = await response.json()
  } catch (error) {
    console.error('加载分类失败', error)
  }
}

这种实现方式支持：

vue实现分类点击