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数据中提供多个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>

Answer 2

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

也就是说，有一种方法可以用一些黑暗的 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

Vue中如何动态生成div？

How to dynamically generate div in Vue?

html

javascript

vue.js

vuejs2