当前位置：首页 > VUE

vue实现tag标签

2026-01-19 20:57:10VUE

Vue 实现 Tag 标签

在 Vue 中实现 Tag 标签可以通过组件化的方式灵活定制样式和功能，以下是几种常见的实现方法：

基础实现

创建一个可复用的 Tag 组件，支持动态渲染标签内容和基础样式：

<template>
  <span class="tag" :style="{ backgroundColor: color }">
    {{ text }}
    <span class="close" @click="$emit('close')">×</span>
  </span>
</template>

<script>
export default {
  props: {
    text: String,
    color: {
      type: String,
      default: '#409EFF'
    }
  }
}
</script>

<style scoped>
.tag {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px;
  border-radius: 4px;
  color: white;
  font-size: 12px;
}
.close {
  margin-left: 4px;
  cursor: pointer;
}
</style>

动态标签列表

通过 v-for 渲染标签列表，并支持添加/删除操作：

vue实现tag标签

<template>
  <div>
    <input v-model="newTag" @keyup.enter="addTag">
    <div class="tag-container">
      <tag 
        v-for="(tag, index) in tags" 
        :key="index"
        :text="tag"
        @close="removeTag(index)"
      />
    </div>
  </div>
</template>

<script>
import Tag from './Tag.vue'

export default {
  components: { Tag },
  data() {
    return {
      tags: ['Vue', 'JavaScript', 'CSS'],
      newTag: ''
    }
  },
  methods: {
    addTag() {
      if (this.newTag.trim()) {
        this.tags.push(this.newTag.trim())
        this.newTag = ''
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1)
    }
  }
}
</script>

带可选择功能的标签

实现可选中状态的标签组件：

<template>
  <span 
    class="tag" 
    :class="{ 'active': active }"
    @click="$emit('update:active', !active)"
  >
    {{ text }}
  </span>
</template>

<script>
export default {
  props: {
    text: String,
    active: Boolean
  }
}
</script>

<style scoped>
.tag {
  display: inline-block;
  padding: 4px 12px;
  margin: 4px;
  border: 1px solid #ddd;
  border-radius: 16px;
  cursor: pointer;
}
.tag.active {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}
</style>

第三方库集成

使用现成的 UI 库快速实现标签功能：

vue实现tag标签

Element UI:

<el-tag
v-for="tag in tags"
:key="tag"
closable
@close="handleClose(tag)"
>
{{ tag }}
</el-tag>

Ant Design Vue:

<a-tag
v-for="tag in tags"
:key="tag"
closable
@close="handleClose(tag)"
>
{{ tag }}
</a-tag>

高级功能扩展

实现标签拖拽排序（需要配合 vuedraggable）:

<draggable v-model="tags" tag="div" class="tag-container">
  <tag 
    v-for="(tag, index) in tags" 
    :key="index"
    :text="tag"
    @close="removeTag(index)"
  />
</draggable>

import draggable from 'vuedraggable'
export default {
  components: { draggable }
}

标签: 标签 vue

分享给朋友：

vue实现适老化样式

Vue 实现适老化样式的关键方法全局字体与字号调整通过 CSS 变量或主题配置统一放大基础字号，建议正文不小于 18px，标题更大。在 App.vue 中设置全局样式： :root { --…

vue实现slider

Vue 实现 Slider 组件使用 Vue 实现 Slider 组件可以通过原生开发或借助第三方库。以下是两种常见方法：原生实现 Slider 创建一个基础的 Slider 组件，通过 v-m…

vue 实现排序

Vue 实现排序的方法使用计算属性实现排序通过计算属性对数组进行排序，可以保持原始数据不变。示例代码展示了如何对列表按名称升序排序： <template> <div>…

vue实现双向

Vue 实现双向绑定的方法 Vue 的双向绑定主要通过 v-model 指令实现，它结合了数据绑定和事件监听，适用于表单元素（如 input、select、textarea 等）。以下是几种常见的实现…

vue搜索实现

Vue 搜索功能实现方法基于计算属性的搜索在 Vue 中可以通过计算属性实现简单的搜索功能。这种方式适合小型数据集，利用 JavaScript 的 filter 方法进行筛选。 data() {…

vue监听实现

Vue 监听实现方法在 Vue 中可以通过多种方式实现监听数据变化或事件触发，以下是常见的几种方法：使用 watch 选项 watch 是 Vue 提供的核心功能之一，用于观察和响应 Vue 实…

vue实现tag标签