当前位置：首页 > VUE

vue实现标签筛选

2026-03-30 10:05:59VUE

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 动态绑定激活状态的样式：

vue实现标签筛选

<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 渲染筛选后的内容：

vue实现标签筛选

<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>