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？

2 个答案: