vue 动态添加/删除dom元素

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。
需要在点击添加时，增加一行key/value的输入框；点击垃圾桶图标时，删除对应行

效果图

核心：使用v-for来管理添加行数量。

<div class="addPanel">
    <div v-for="num in ParamsNum" :key="num">
        <el-row style="margin-bottom: 10px;">
            <el-col :span="9">
                <el-input v-model="temp.params[num].key" placeholder="key" size="small"/>
            </el-col>
            <el-col :span="10">
                <el-input style="margin-left: 10px;" v-model="temp.params[num].value" placeholder="value" size="small"/>
            </el-col>
            <el-col :span="4" style="text-align: center;line-height: 30px;">
                <i class="el-icon-delete-solid" style="color:red;cursor: pointer;"
                @click="handleDeleteParams(num)"></i>
            </el-col>
        </el-row>
    </div>
    <span class="addBlock" @click="handleAddParams"><i class="el-icon-plus" style="font-weight: bold"></i> 添加请求参数</span>
</div>

data() {
    return {
        temp: {
            params: [{key:'',value:''}]
        },
        ParamsNum: 0
    }
},
methods: {
	handleAddParams() {
        this.temp.params.push({key:'',value:''})
        this.ParamsNum++
    },
    handleDeleteParams(num) {
        this.ParamsNum--
        this.temp.params.splice(num,1)
    }
}

.addPanel {
     margin-left: 10px;
     width: 98%;
     min-height: 70px;
     border: 2px solid #e4e7ed;
     border-radius: 15px;
     padding: 10px;
 }
 .addBlock {
     line-height: 50px;
     border: 1px #dddddd dashed;
     padding: 10px;
     cursor: pointer;
 }

转载自：https://blog.csdn.net/qq_36262395/article/details/114691800