textarea与标签组合，点击标签填入标签内容，再次点击删除内容（vue）

可以通过绑定事件和动态绑定属性来实现这个功能，以下是一个示例代码：

<template>
  <div class="tag-container">
    <div class="tag" v-for="(tag, index) in tags" :key="index" @click="removeTag(index)">
      {{ tag }}
    </div>
    <textarea v-model="newTag" @keydown.enter.prevent="addTag"></textarea>
  </div>
</template>

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

<style>
.tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  font-size: 14px;
  cursor: pointer;
}
</style>

在模板中，我们使用了 `v-for` 指令来渲染已有的标签，使用 `v-model` 指令双向绑定了一个 `newTag` 变量来获取用户输入的新标签。在 `<textarea>` 标签上监听了 `keydown.enter` 事件，当用户按下回车键时调用 `addTag` 方法来添加新标签。

在组件的 `methods` 属性中，我们定义了 `addTag` 和 `removeTag` 两个方法。`addTag` 方法首先判断用户输入的标签是否为空，如果不为空则将其添加到 `tags` 数组中，并清空 `newTag` 变量。`removeTag` 方法接收一个索引值，用来删除 `tags` 数组中对应位置的标签。

最后，在样式中我们定义了 `.tag` 类来渲染标签的样式，以及 `.tag-container` 类来使标签和输入框在同一行并自动换行。