当前位置：首页 > VUE

vue实现标签筛选

2026-03-09 22:19:52VUE

Vue实现标签筛选的方法

使用Vue实现标签筛选功能可以通过多种方式实现，以下提供两种常见方法：

方法一：基于计算属性

在Vue组件中定义标签数据和一个用于存储选中标签的数组，通过计算属性实现筛选逻辑。

<template>
  <div>
    <div v-for="tag in tags" :key="tag" @click="toggleTag(tag)">
      {{ tag }} {{ selectedTags.includes(tag) ? '✓' : '' }}
    </div>

    <div v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['前端', '后端', '移动端', '数据库'],
      selectedTags: [],
      items: [
        { id: 1, name: 'Vue项目', tags: ['前端'] },
        { id: 2, name: 'Spring项目', tags: ['后端'] },
        { id: 3, name: 'React Native项目', tags: ['前端', '移动端'] }
      ]
    }
  },
  computed: {
    filteredItems() {
      if (this.selectedTags.length === 0) {
        return this.items
      }
      return this.items.filter(item => 
        this.selectedTags.every(tag => item.tags.includes(tag))
      )
    }
  },
  methods: {
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag)
      if (index === -1) {
        this.selectedTags.push(tag)
      } else {
        this.selectedTags.splice(index, 1)
      }
    }
  }
}
</script>

方法二：使用Vuex管理状态

对于大型应用，可以使用Vuex集中管理标签筛选状态。

// store.js
export default new Vuex.Store({
  state: {
    selectedTags: [],
    items: [
      { id: 1, name: 'Vue项目', tags: ['前端'] },
      { id: 2, name: 'Spring项目', tags: ['后端'] }
    ]
  },
  getters: {
    filteredItems: state => {
      if (state.selectedTags.length === 0) return state.items
      return state.items.filter(item => 
        state.selectedTags.every(tag => item.tags.includes(tag))
      )
    }
  },
  mutations: {
    toggleTag(state, tag) {
      const index = state.selectedTags.indexOf(tag)
      if (index === -1) {
        state.selectedTags.push(tag)
      } else {
        state.selectedTags.splice(index, 1)
      }
    }
  }
})

样式优化建议

为选中的标签添加视觉反馈：

.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  background: #eee;
  cursor: pointer;
}

.tag.selected {
  background: #42b983;
  color: white;
}