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

布满荆棘的人生 2021-07-24 13:53 1894阅读 0赞

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

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

**初始状态**：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

**实现思路**：

可以利用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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/db18b04421064adeb9325a5033e8e065.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/287438ca2c2f4e729eb4006fe7309bd4.png