vue实现分类点击
实现分类点击功能
在Vue中实现分类点击功能通常需要结合v-for指令渲染分类列表，并通过事件绑定处理点击逻辑。以下是一个典型实现方案：
模板部分
<template>
<div class="category-container">
<div
v-for="category in categories"
:key="category.id"
@click="selectCategory(category.id)"
:class="{ 'active': selectedCategory === category.id }"
>
{{ category.name }}
</div>
</div>
</template>脚本部分
<script>
export default {
data() {
return {
categories: [
{ id: 1, name: '电子产品' },
{ id: 2, name: '服装' },
{ id: 3, name: '食品' }
],
selectedCategory: null
}
},
methods: {
selectCategory(id) {
this.selectedCategory = id
// 这里可以添加获取分类数据的逻辑
}
}
}
</script>样式处理
添加基础样式增强交互体验：
<style scoped>
.category-container {
display: flex;
gap: 10px;
}
.category-container div {
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
.category-container div:hover {
background-color: #f5f5f5;
}
.category-container div.active {
background-color: #42b983;
color: white;
}
</style>进阶实现方案
对于更复杂的场景，可以考虑使用Vuex管理分类状态：
// store/modules/categories.js
export default {
state: {
currentCategory: null
},
mutations: {
SET_CURRENT_CATEGORY(state, payload) {
state.currentCategory = payload
}
}
}组件中改为调用Vuex：
methods: {
selectCategory(id) {
this.$store.commit('SET_CURRENT_CATEGORY', id)
}
}动态加载分类数据
实际项目中分类数据通常从API获取：
created() {
axios.get('/api/categories')
.then(response => {
this.categories = response.data
})
}路由参数集成
如果使用vue-router，可将分类ID作为路由参数：
selectCategory(id) {
this.$router.push({
path: '/products',
query: { category: id }
})
}
