Javascript 创建一个类似“多选”选项的输入字段

我有一个输入字段，当用户键入某个内容时，我在其中创建一个数组。当用户按“，”时，我将字符串分隔为数组。因此，如果用户输入：“apple，banana，mango”，数组是：['apple'，'banna'，'mango']。我正在使用VueJS2。生成数组的代码是：

<template>
    <input type="text" v-model="labelString" @keyup="addLabels">
</template>
<script>
export default {
    data() {
        return {
            labelString: '',
            labels: []
        }
    },
    methods: {
        addLabels() {
            this.labels = this.labelString.split(',');
        },
    }
}
</script>

导出默认值{
数据（）{
返回{
标签字符串：“”，
标签：[]
}
},
方法：{
addLabels（）{
this.labels=this.labelString.split（'，'）；
},
}
}

---

现在我想将输入字段设置为StackOverflow站点的Tags字段（当您提出问题时，就在“发布您的问题”按钮上方）。。当用户键入一个或多个单词，然后按“，”时，它将像此字段一样分开。有人能帮我怎么做吗？或者帮我找个方向。TIA

您应该做如下操作：

{{labels}}

---

然后在

span

中添加标签，使其看起来像位于

input

内部。谢谢您的回答，但这不是我想要的。我想它的字符串留在输入字段，我需要交叉按钮删除它。如本页提问链接中的标签。我想要类似于多选择框（pillbox）的东西。在这里签出如果你不想从头开始开发它，我建议你使用它。

new Vue({
  el: "#app",
  data() {
        return {
            labelString: '',
            labels: []
        }
    },
    methods: {
        addLabels() {
            this.labels.push(this.labelString);
            this.labelString = '';
        },
    }
})