vue实现点击分类
实现点击分类的基本思路
在Vue中实现点击分类功能，通常需要结合v-for指令渲染分类列表，并通过v-on或@click绑定点击事件。根据分类数据的变化，动态更新展示内容。
准备分类数据
在Vue组件的data中定义分类数据和当前选中的分类标识：
data() {
return {
categories: [
{ id: 1, name: '全部' },
{ id: 2, name: '科技' },
{ id: 3, name: '体育' }
],
activeCategory: 1
}
}渲染分类列表并绑定点击事件
使用v-for渲染分类列表，并通过:class动态设置激活状态的样式：
<div class="category-list">
<div
v-for="item in categories"
:key="item.id"
@click="selectCategory(item.id)"
:class="{ 'active': activeCategory === item.id }"
>
{{ item.name }}
</div>
</div>处理分类点击事件
在methods中定义分类选择方法，更新当前激活分类并触发内容更新：
methods: {
selectCategory(categoryId) {
this.activeCategory = categoryId;
this.loadDataByCategory();
},
loadDataByCategory() {
// 根据activeCategory加载对应分类的数据
// 可以是API请求或本地数据过滤
}
}样式设置
为分类列表和激活状态添加基础样式：
.category-list {
display: flex;
gap: 10px;
}
.category-list div {
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
}
.category-list div.active {
background-color: #42b983;
color: white;
}动态内容展示
根据当前分类展示不同内容，可以结合计算属性或v-if/v-show：
<div v-if="activeCategory === 1">全部内容</div>
<div v-else-if="activeCategory === 2">科技内容</div>
<div v-else>体育内容</div>使用计算属性优化
对于复杂分类场景，可以使用计算属性动态过滤数据：
computed: {
filteredItems() {
if (this.activeCategory === 1) return this.allItems;
return this.allItems.filter(item => item.category === this.activeCategory);
}
}路由参数集成
若需与路由结合，可通过watch监听路由变化：
watch: {
'$route.query.category'(newVal) {
this.activeCategory = parseInt(newVal) || 1;
}
}注意事项
- 确保
key属性使用唯一标识 - 复杂分类场景考虑使用Vuex或Pinia管理状态
- 移动端场景可添加滑动分类栏支持
- 性能敏感场景考虑对分类数据进行缓存
