当前位置：首页 > 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 实现前端注册功能注册表单设计使用 Vue 的模板语法创建注册表单，包含用户名、邮箱、密码和确认密码字段。表单需绑定 v-model 实现双向数据绑定。 <template>…

vue实现https

Vue 中实现 HTTPS 的步骤在 Vue 项目中实现 HTTPS 主要涉及开发环境配置和生产环境部署。以下是具体方法：开发环境配置（Vue CLI 或 Vite）使用 mkcert 生成…

vue alert实现

使用 Vue 实现 Alert 组件在 Vue 中实现 Alert 组件可以通过自定义组件或结合第三方库完成。以下是几种常见方法：自定义 Alert 组件创建一个可复用的 Alert 组件，通…

vue实现订单

Vue 实现订单功能订单数据结构设计订单数据通常包含以下字段： order: { id: String, // 订单ID userId: String,…

vue实现答辩

Vue 实现答辩系统的关键步骤项目初始化与配置使用 Vue CLI 或 Vite 创建项目，安装 Vue Router 管理路由，Pinia/Vuex 进行状态管理。配置 ESLint 和 Pre…

vue实现123456

Vue 实现数字 123456 的显示在 Vue 中显示数字 123456 非常简单，可以通过以下方法实现：方法一：直接在模板中显示 <template> <div>…

vue实现tag标签