html:
//绑定点击事件
<div class="wlAddBtn " @click="add()">
新增
</div>
//要复制的HTML结构
<div class="model" v-for="(val,index) in htmlArr" :key="index">
<p class="modelTitle">选项{{ index }}</p>
<div class="nameDiv">
<div>昵称:</div>
<input type="text" v-model="val.name" placeholder="请输入昵称" />
</div>
<div class="desc">
<div>文字描述:</div>
<textarea name="" id="" cols="30" rows="10" v-model="val.desc"></textarea>
</div>
</div>
data中定义一个数组,数组长度来控制页面上该结构循环显示的次数:
data: function() {
return {
htmlArr: [
{
name: "",
desc: "",
}
]
}
}
在methods中定义点击事件,来改变数组长度
add() {
this.htmlArr.unshift({
name: "",
desc: "",
});
console.log(this.htmlArr);
},