Vue中如何动态生成div？答案

【问题标题】：How to dynamically generate div in Vue?Vue中如何动态生成div？
【发布时间】：2018-11-10 10:40:23
【问题描述】：

我有以下代码：

<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！请帮忙！

【问题讨论】：

你到底想做什么？为什么？你能分享更多关于多个数据的细节吗？
@C2486 好吧，我的要求就是这样做
@C2486 那里有样本数据！
如果divs: 3 怎么办？
@C2486 然后它将渲染三个 div 并且只有在这之后 div.content 才应该渲染

标签： javascript html vue.js vuejs2

【解决方案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://vuejs.org/v2/guide/render-function.html

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

【讨论】：

【解决方案2】：

这里是在 vue 数据中提供多个 Div 的例子。使用 Vue 组件。

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

Vue.component('my-div', {
  props:['mydata','divs'],
  template: '<div class="test"><div v-if="divs==1" class="text-center">{{mydata}}</div><div v-if="divs>1"><my-div :mydata="mydata" :divs="divs-1"></my-div></div></div>'
})

var v = new Vue({
el: '#app',
data:{
  name:'Niklesh Raut',
  divs:4
}
});

#app div.test{
 border: 2px solid blue;
 padding:5px;
}
.text-center{
  text-align:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-div :mydata="name" :divs="divs"></my-div>
</div>

【讨论】：

这是一个很好的答案。