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

可以使用Vue的v-model指令和事件监听来实现这个功能。首先，需要使用一个textarea元素和一个标签列表，以及一个data属性来存储标签列表。代码如下：

<template>
  <div>
    <textarea v-model="inputText"></textarea>
    <div>
      <span v-for="(tag, index) in tags" :key="index" @click="deleteTag(index)">{{ tag }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      tags: []
    }
  },
  methods: {
    addTag(tag) {
      this.tags.push(tag)
    },
    deleteTag(index) {
      this.tags.splice(index, 1)
    }
  },
  watch: {
    inputText(newValue) {
      if (newValue.endsWith(',')) {
        const tag = newValue.slice(0, -1)
        this.addTag(tag)
        this.inputText = ''
      }
    }
  }
}
</script>

在上面的代码中，我们使用了一个textarea元素来输入标签内容，并使用v-model指令将输入内容和组件的inputText属性进行双向绑定。我们还使用了一个标签列表来展示已经添加的标签，并使用v-for指令将标签列表循环展示出来。

我们使用@click事件监听标签的点击事件，当用户点击标签时，会调用deleteTag方法，将对应的标签从标签列表中删除。

最后，我们使用watch属性监听inputText属性的变化。当inputText的值以逗号结尾时，我们将最后一个逗号前的文本作为标签内容，调用addTag方法将其添加到标签列表中，并将inputText属性清空，以便用户输入下一个标签。