javascript - Vue中如何动态生成div？

Question

我有以下代码:

<div class="content">
    <p>Hello World</p>
</div>

我有以下 div 计数:

data() {
    return {
        divs: 2
    }
}

所以，如果 divs 是 2 那么它应该生成两个 div 并将 div.content 包裹在里面所以它变成这样的东西:

<div>
    <div>
        <div class="content">
            <p>Hello World</p>
        </div>
    </div>
</div>

如您所见，有两个 div，然后只有这个 div.content!我尝试使用 v-for 但它会生成 2 个单独的 div!请帮忙!

Answer 1

首先:这听起来像是一个非常不必要的要求，重新定义问题很可能会导致更好的解决方案!

话虽如此，有一种方法可以用一些黑暗的 Vue 魔法来实现你想要做的事情 ;-)

你需要的是一个递归渲染函数:

render: function (createElement) {
return this.level >= 1 ? 
  createElement('div', [createElement(DynamicDiv, {
    props: {
      level: this.level-1
    }
  }, this.$slots.default)]) : 
  createElement('div', this.$slots.default)
},
props: {
  level: {
    type: Number,
    required: true
  }
}

https://v2.vuejs.org/v2/guide/render-function.html

您可以在这里找到一个工作示例:https://codesandbox.io/s/k9p16wzmyo