vue实现标签筛选
Vue 实现标签筛选功能
标签筛选功能通常用于分类展示数据，用户可以通过点击标签来筛选内容。以下是一个基于 Vue 的实现方案。
数据准备
定义一个包含标签和对应数据的数组：
data() {
return {
tags: ['全部', '标签1', '标签2', '标签3'],
items: [
{ id: 1, name: '项目1', tag: '标签1' },
{ id: 2, name: '项目2', tag: '标签2' },
{ id: 3, name: '项目3', tag: '标签3' },
{ id: 4, name: '项目4', tag: '标签1' }
],
activeTag: '全部'
}
}标签渲染
使用 v-for 渲染标签列表，并通过 v-bind:class 动态绑定激活状态的样式：
<div class="tag-container">
<span
v-for="tag in tags"
:key="tag"
@click="activeTag = tag"
:class="{ 'active': activeTag === tag }"
>
{{ tag }}
</span>
</div>内容筛选
通过计算属性实现筛选逻辑：
computed: {
filteredItems() {
if (this.activeTag === '全部') {
return this.items
}
return this.items.filter(item => item.tag === this.activeTag)
}
}内容展示
使用 v-for 渲染筛选后的内容：
<div class="item-list">
<div v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</div>
</div>样式示例
为标签和激活状态添加基础样式：
.tag-container span {
display: inline-block;
margin: 5px;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
background: #f0f0f0;
}
.tag-container span.active {
background: #409eff;
color: white;
}完整组件示例
<template>
<div>
<div class="tag-container">
<span
v-for="tag in tags"
:key="tag"
@click="activeTag = tag"
:class="{ 'active': activeTag === tag }"
>
{{ tag }}
</span>
</div>
<div class="item-list">
<div v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tags: ['全部', '标签1', '标签2', '标签3'],
items: [
{ id: 1, name: '项目1', tag: '标签1' },
{ id: 2, name: '项目2', tag: '标签2' },
{ id: 3, name: '项目3', tag: '标签3' },
{ id: 4, name: '项目4', tag: '标签1' }
],
activeTag: '全部'
}
},
computed: {
filteredItems() {
if (this.activeTag === '全部') {
return this.items
}
return this.items.filter(item => item.tag === this.activeTag)
}
}
}
</script>
<style>
.tag-container span {
display: inline-block;
margin: 5px;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
background: #f0f0f0;
}
.tag-container span.active {
background: #409eff;
color: white;
}
</style>进阶优化
对于更复杂的场景，可以考虑以下优化：
- 使用 Vuex 管理标签状态
- 添加动画过渡效果
- 实现多标签组合筛选
- 支持标签的增删改查功能
