从提供的数据 json/array 生成带有标签的 HTML

Question

我想使用来自json/array 的标记生成 HTML，其中可能包含子级中的任意数量的子级等等，我想基于提供的数组/json 生成复杂的嵌套 HTML 标记。 我已经调查过了 How to create dynamic tag based on props with Vue 2

但我不明白要制作一个组件/系统，该组件/系统将在子属性中挖掘多个子项以生成 HTML 标记。

请查看我创建的 codepen 示例： Codepen Sample

Answer 1

Vue.js render function 应该满足你的要求。使用它，您可以递归遍历数组，创建所有 DOM 元素。请看演示：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#demo',
  data () {
    return {
      items: [
        {
          id: 6568,
          tag: 'h1',
          mesg: '1',
          child: [
            {
              id: 6569,
              tag: 'h2',
              mesg: 11,
              child: [
                {
                  id: 6570,
                  tag: 'h4',
                  mesg: '111',
                  child: []
                }
              ]
            },
            {
              id: 99777,
              tag: 'p',
              mesg: 1123
            }
          ]
        },
        {
          id: 56565,
          tag: 'p',
          mesg: '6568985',
          child: []
        }
      ]
    }
  },
  render: function (createElement) {
    const renderNode = item => {
      const children = [item.mesg];
      if (item.child && Array.isArray(item.child)) {
        children.push(...item.child.map(renderNode))
      }
      return createElement(item.tag, children)
    }
    return createElement('div', this.items.map(renderNode));
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo"></div>