vue实现分类
Vue 实现分类的方法
使用 v-for 和计算属性
在 Vue 中可以通过 v-for 指令和计算属性实现分类功能。假设有一个商品列表需要按类别分类展示：
data() {
return {
products: [
{ id: 1, name: '苹果', category: '水果' },
{ id: 2, name: '香蕉', category: '水果' },
{ id: 3, name: '胡萝卜', category: '蔬菜' }
]
}
},
computed: {
categorizedProducts() {
const categories = {}
this.products.forEach(product => {
if (!categories[product.category]) {
categories[product.category] = []
}
categories[product.category].push(product)
})
return categories
}
}模板部分：
<div v-for="(products, category) in categorizedProducts" :key="category">
<h3>{{ category }}</h3>
<ul>
<li v-for="product in products" :key="product.id">
{{ product.name }}
</li>
</ul>
</div>使用组件化方式
对于更复杂的分类需求，可以创建可复用的分类组件：
// CategoryComponent.vue
<template>
<div>
<h2>{{ title }}</h2>
<slot></slot>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>父组件中使用：
<category-component title="水果">
<ul>
<li v-for="product in fruitProducts" :key="product.id">
{{ product.name }}
</li>
</ul>
</category-component>动态分类筛选
结合 Vue 的响应式特性，可以实现动态分类筛选：
data() {
return {
activeCategory: 'all',
// ...其他数据
}
},
computed: {
filteredProducts() {
if (this.activeCategory === 'all') {
return this.products
}
return this.products.filter(
product => product.category === this.activeCategory
)
}
}模板中添加分类选择器：
<select v-model="activeCategory">
<option value="all">全部</option>
<option value="水果">水果</option>
<option value="蔬菜">蔬菜</option>
</select>使用 Vuex 管理分类状态
对于大型应用，可以使用 Vuex 集中管理分类状态：
// store.js
state: {
categories: ['水果', '蔬菜', '肉类'],
currentCategory: 'all',
products: []
},
mutations: {
setCategory(state, category) {
state.currentCategory = category
}
},
getters: {
filteredProducts: state => {
if (state.currentCategory === 'all') {
return state.products
}
return state.products.filter(
product => product.category === state.currentCategory
)
}
}组件中通过 mapGetters 和 mapMutations 使用：
import { mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters(['filteredProducts'])
},
methods: {
...mapMutations(['setCategory'])
}
}
