vue3 标签输入框

Vue3 中的标签输入框可以使用 `v-model` 指令来实现双向绑定，同时可以使用 `v-for` 指令来循环展示已选标签。

以下是一个简单的示例代码：

<template>
  <div>
    <div>
      <input type="text" v-model="newTag" @keyup.enter="addTag">
      <button @click="addTag">添加</button>
    </div>
    <div>
      <span v-for="(tag, index) in tags" :key="index">{{ tag }} <button @click="removeTag(index)">x</button></span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tags = ref(['tag1', 'tag2'])
    const newTag = ref('')

    const addTag = () => {
      if (newTag.value !== '') {
        tags.value.push(newTag.value)
        newTag.value = ''
      }
    }

    const removeTag = (index) => {
      tags.value.splice(index, 1)
    }

    return {
      tags,
      newTag,
      addTag,
      removeTag
    }
  }
}
</script>

在上面的代码中，我们使用 `ref` 函数来创建响应式数据 `tags` 和 `newTag`，并在 `setup` 函数中定义了 `addTag` 和 `removeTag` 方法来添加和删除标签。同时，我们使用 `v-model` 指令来将输入框的值绑定到 `newTag` 变量上，使用 `v-for` 指令来循环展示已选标签，并使用 `@keyup.enter` 指令来监听回车键，以便在按下回车键时添加标签。