当前位置：首页 > VUE

vue实现标签多选效果

2026-02-21 04:45:30VUE

实现标签多选效果的方法

使用 `v-model` 绑定数组

通过 v-model 绑定一个数组，可以自动处理多选逻辑。选中的标签值会添加到数组中。

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

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

自定义标签组件

封装一个可复用的标签多选组件，支持样式定制和交互逻辑。

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

<script>
export default {
  props: {
    tags: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      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 {
  display: inline-block;
  padding: 4px 8px;
  margin: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.tag.active {
  background-color: #42b983;
  color: white;
}
</style>

结合第三方库

使用如 vue-multiselect 等第三方库快速实现标签多选功能。

安装依赖：

npm install vue-multiselect

示例代码：

vue实现标签多选效果

<template>
  <multiselect
    v-model="selectedTags"
    :options="tags"
    :multiple="true"
    :close-on-select="false"
    placeholder="选择标签"
  ></multiselect>
</template>

<script>
import Multiselect from 'vue-multiselect'
export default {
  components: { Multiselect },
  data() {
    return {
      tags: ['Vue', 'React', 'Angular'],
      selectedTags: []
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>