Question

我想从json/array生成带有标签的HTML，它可能在child中包含任意数量的child，依此类推，依此类推，我想基于提供的array / json生成复杂的嵌套HTML标记。我已经看过了 How to create dynamic tag based on props with Vue 2

但是我不知道要制作一个组件/系统，该组件/系统会在child属性内挖掘多个child来生成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>

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

1 个答案: