Vue JS呈现HTML元素

Posted 2021-04-30

<input type="file" name="" value="">
  <button type="button" name="button">Add More Pictures</button>

我创建了一个文件上传器和旁边的按钮。我想要的是，如果我点击“添加更多图片”按钮，另一个文件上传器与另一个添加更多图片按钮应该加载到按钮下方。

我怎么能用VueJS做到这一点？

答案

创建一个基于范围的循环，在数字vm属性增加时创建字段。

<div v-for="n in uploadFieldCount" :key="n">
  <input type="file" name="" value="">
  <button type="button" name="button" @click="uploadFieldCount++">Add More Pictures</button>
</div>

并在您的虚拟机数据部分添加该属性：

data() {
  return {
    uploadFieldCount: 1 // initialize with the number of initial file uploads you need
  }
}