当前位置：首页 > VUE

vue实现标签多选效果

2026-01-20 12:46:05VUE

实现标签多选效果的方法

在Vue中实现标签多选效果可以通过多种方式完成，以下是几种常见的实现方法：

使用v-model和数组绑定

通过v-model绑定一个数组，当选中标签时，将标签的值添加到数组中，取消选中时从数组中移除。

<template>
  <div>
    <label v-for="tag in tags" :key="tag">
      <input type="checkbox" v-model="selectedTags" :value="tag">
      {{ tag }}
    </label>
    <p>已选标签: {{ selectedTags }}</p>
  </div>
</template>

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

使用自定义组件实现美观的标签选择

如果需要更美观的UI，可以创建自定义标签组件：

<template>
  <div>
    <div 
      v-for="tag in tags" 
      :key="tag"
      class="tag"
      :class="{ 'selected': selectedTags.includes(tag) }"
      @click="toggleTag(tag)"
    >
      {{ tag }}
    </div>
    <p>已选标签: {{ selectedTags }}</p>
  </div>
</template>

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

<style>
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.tag.selected {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方UI库

如果需要更丰富的功能，可以考虑使用第三方UI库如Element UI、Vuetify或Ant Design Vue：

<template>
  <div>
    <el-checkbox-group v-model="selectedTags">
      <el-checkbox 
        v-for="tag in tags" 
        :label="tag" 
        :key="tag"
      >
        {{ tag }}
      </el-checkbox>
    </el-checkbox-group>
    <p>已选标签: {{ selectedTags }}</p>
  </div>
</template>

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

实现标签搜索和过滤

对于大量标签的情况，可以添加搜索功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索标签">
    <div 
      v-for="tag in filteredTags" 
      :key="tag"
      class="tag"
      :class="{ 'selected': selectedTags.includes(tag) }"
      @click="toggleTag(tag)"
    >
      {{ tag }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['Vue', 'React', 'Angular', 'Svelte', 'JavaScript', 'TypeScript'],
      selectedTags: [],
      searchQuery: ''
    }
  },
  computed: {
    filteredTags() {
      return this.tags.filter(tag => 
        tag.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    toggleTag(tag) {
      const index = this.selectedTags.indexOf(tag)
      if (index > -1) {
        this.selectedTags.splice(index, 1)
      } else {
        this.selectedTags.push(tag)
      }
    }
  }
}
</script>

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择合适的方案。

vue实现标签多选效果