Javascript Vue：如何使用buttonclick生成div的新实例？

我需要创建一个函数，在单击按钮（#addDiv）时生成特定div的新实例（.container in the template）。在此之前，按钮应该是网页上唯一可见的东西。我该怎么办

我知道可以使用document.appendChild执行此操作。有更好的办法吗

我使用的切换功能，工作得很好，我已经包括在代码中，给你整个画面

Vue

    Vue.component('dynamicdDvs', {
    template: `

<div>
    <div class="headerDiv">
        <button class="addDiv" type="button" v-on:click="createDiv">Create</button>
    </div>
    <div class="container">
        <div class="createdDiv">
            <h2>I am dynamic!</h2>
            <button class="minimize" v-on:click="expand">Make me smal</button>
        </div>
        <div class="createdDivMinimized" v-if="!displayDiv">
            <p>I am a smal version of the created div!</p>
            <button class="maximize" v-on:click="expand">Expand me</button>
        </div>
    </div>
</div>
`,

  data:function () {
    return {
        displayDiv: false

    }
  },
  methods:  {
        expand: function () {
            this.displayDiv = !this.displayDiv;
        },

        createDiv: function() {
          //The function that creates a new div, with the same code as 
          //.createdDiv and .createDivMinimized may be placed here
        }
    }
});

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="parent">

<dynamicDivs></dynamicDivs>

</div>

---

因此，您可以在

数据中为
元素的数量设置一个数字并使用。比如说

data () {
  return {
    displayDiv: [false],
    divs: 1
  }
}

在你的模板中

<template v-for="n in divs">
  <div class="createdDiv">
    <!-- snip -->
    <button class="minimize" v-on:click="displayDiv[n-1] = !displayDiv[n-1]">Make me small</button>
  </div>
  <div class="createdDivMinimized" v-if="!displayDiv[n-1]">
    <!-- snip -->
  </div>
</template>

您可以正常地将div添加到模板中，并通过if语句显示/隐藏，例如if语句是从DOM中添加/删除整个元素@onClick=“showDiv=！showDiv”这并不是我问题的解决方案，但经过3天的搜索，这是一个灵感，使我的代码终于工作了！
<template v-for="n in divs">
  <div class="createdDiv">
    <!-- snip -->
    <button class="minimize" v-on:click="displayDiv[n-1] = !displayDiv[n-1]">Make me small</button>
  </div>
  <div class="createdDivMinimized" v-if="!displayDiv[n-1]">
    <!-- snip -->
  </div>
</template>

createDiv () {
  this.divs++
  this.displayDiv.push(false)
}