vue中的input框内添加动态标签示例

可以使用 Vue 的指令 `v-bind:class` 和 `v-if` 来实现动态添加标签。

首先，在 Vue 的 data 中定义一个变量来存储是否需要添加标签的状态：

data() {
  return {
    showTag: false
  }
}

然后，在 input 标签中添加 `v-bind:class` 指令来动态控制添加标签的样式：

<input type="text" v-bind:class="{ 'has-tag': showTag }">

这里的 `'has-tag'` 是一个 CSS 类名，通过绑定 showTag 变量来控制是否添加这个类名。

最后，在需要添加标签的时候，通过 `v-if` 指令来控制 showTag 变量的值：

<button @click="showTag = true">添加标签</button>

这样，当点击按钮时，showTag 变量的值会变成 true，从而动态添加标签。完整的代码如下：

<template>
  <div>
    <input type="text" v-bind:class="{ 'has-tag': showTag }">
    <button @click="showTag = true">添加标签</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTag: false
    }
  }
}
</script>

<style>
.has-tag {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  margin-right: 10px;
  font-size: 14px;
}
</style>