vue 实现点击“增加“”按钮，添加一个HTML元素

vue 实现点击“增加“”按钮，添加一个HTML元素

场景描述：vue中经常需要点击一次增加按钮，添加一个HTML元素，比如一个div。

初始状态：

点击“增加”按钮后，添加一套这样的元素：

实现思路：

可以利用v-for循环的方式，循环itemcount变量，先设为一个itemcount变量为1（这里初始化显示的是1个），然后“增加”按钮的事件让itemcount增加1，即可。

代码：

data中定义：

itemcount:1,
myValue:[],

template标签中：

<template>
<div v-for='(item,index) in itemcount' :id="'myid'+index" v-modle:myValue[index]>   //这里动态设置id，可以实现根据ID号获取每个渲染的HTML元素，v-modle绑定的要设置为数组，这样根据数组下标可以获取每个绑定的值，不能设置为一个字符串，不然那渲染的HTML元素绑定的值都是一个值，一处改动到处都变了。
//循环的html内容
</div>
</template>

"增加"按钮事件函数：

this.itemcount +=1;