layui中引用vue的动态编辑标签

在 layui 中引用 Vue 的动态编辑标签，可以通过以下步骤实现：

1. 在 HTML 中添加一个 layui 的表单元素，例如：

<div class="layui-form-item">
  <label class="layui-form-label">标签</label>
  <div class="layui-input-block">
    <input type="text" name="tags" lay-verify="required" placeholder="请输入标签" autocomplete="off" class="layui-input">
  </div>
</div>

2. 在 Vue 实例中，使用 v-model 指令将表单元素与 Vue 组件中的 data 绑定，例如：

<div id="app">
  <div class="layui-form-item">
    <label class="layui-form-label">标签</label>
    <div class="layui-input-block">
      <input type="text" name="tags" lay-verify="required" placeholder="请输入标签" autocomplete="off" class="layui-input" v-model="tags">
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      tags: ''
    }
  })
</script>

3. 在 Vue 的 computed 中，将 tags 字符串转换为数组，并将数组中的每个元素渲染为 layui 的 tag 标签，例如：

<div id="app">
  <div class="layui-form-item">
    <label class="layui-form-label">标签</label>
    <div class="layui-input-block">
      <input type="text" name="tags" lay-verify="required" placeholder="请输入标签" autocomplete="off" class="layui-input" v-model="tags">
    </div>
  </div>
  <div class="layui-form-item layui-show">
    <label class="layui-form-label">已选标签</label>
    <div class="layui-input-block">
      <div class="layui-form-mid layui-word-aux tag-list">
        <template v-for="tag in tagList">
          <button class="layui-btn layui-btn-sm layui-btn-primary">{{ tag }}</button>
        </template>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      tags: ''
    },
    computed: {
      tagList() {
        return this.tags.split(',')
      }
    }
  })
</script>

这样，就实现了在 layui 中引用 Vue 的动态编辑标签的效果。