当前位置：首页 > VUE

vue实现多标签选择

2026-02-23 08:08:58VUE

Vue 实现多标签选择

基本实现思路

在 Vue 中实现多标签选择功能，可以通过以下方式完成。核心是利用 v-model 绑定数组来存储选中的标签值，结合 v-for 渲染标签选项。

<template>
  <div>
    <div v-for="tag in availableTags" :key="tag">
      <input
        type="checkbox"
        :id="tag"
        :value="tag"
        v-model="selectedTags"
      />
      <label :for="tag">{{ tag }}</label>
    </div>
    <p>已选标签: {{ selectedTags.join(', ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      availableTags: ['Vue', 'React', 'Angular', 'Svelte'],
      selectedTags: []
    };
  }
};
</script>

封装为可复用组件

可以将多标签选择功能封装为独立组件，提高复用性。

<template>
  <div>
    <div v-for="tag in tags" :key="tag.value">
      <input
        type="checkbox"
        :id="tag.value"
        :value="tag.value"
        v-model="selectedValues"
      />
      <label :for="tag.value">{{ tag.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tags: {
      type: Array,
      required: true,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    selectedValues: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit('input', newVal);
      }
    }
  }
};
</script>

使用第三方组件库

如果不想手动实现，可以直接使用现成的第三方组件库：

Element UI 的 el-checkbox-group：

<el-checkbox-group v-model="selectedTags">
<el-checkbox v-for="tag in availableTags" :label="tag" :key="tag"></el-checkbox>
</el-checkbox-group>

Vuetify 的 v-checkbox：

<v-checkbox
v-for="tag in availableTags"
:key="tag"
v-model="selectedTags"
:label="tag"
:value="tag"
></v-checkbox>

添加搜索过滤功能

对于大量标签的情况，可以添加搜索框过滤选项：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索标签..." />
    <div v-for="tag in filteredTags" :key="tag">
      <input
        type="checkbox"
        :id="tag"
        :value="tag"
        v-model="selectedTags"
      />
      <label :for="tag">{{ tag }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      availableTags: ['Vue', 'React', 'Angular', 'Svelte'],
      selectedTags: [],
      searchQuery: ''
    };
  },
  computed: {
    filteredTags() {
      return this.availableTags.filter(tag =>
        tag.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

样式优化

使用 CSS 美化标签选择界面，例如将标签显示为按钮样式：

<template>
  <div class="tag-selector">
    <div
      v-for="tag in availableTags"
      :key="tag"
      class="tag"
      :class="{ active: selectedTags.includes(tag) }"
      @click="toggleTag(tag)"
    >
      {{ tag }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      availableTags: ['Vue', 'React', 'Angular', 'Svelte'],
      selectedTags: []
    };
  },
  methods: {
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag);
      if (index === -1) {
        this.selectedTags.push(tag);
      } else {
        this.selectedTags.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  padding: 6px 12px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
}
.tag.active {
  background: #42b983;
  color: white;
}
</style>

这些方法提供了从基础到进阶的多标签选择实现方案，可以根据项目需求选择适合的方式。

vue实现多标签选择