vue 動態(tài)添加/刪除dom元素節(jié)點的操作代碼

更新時間：2022年12月06日 10:05:46 作者：Mr.Meng_95

這篇文章主要介紹了vue 動態(tài)添加/刪除dom元素,需要在點擊添加時，增加一行key/value的輸入框；點擊垃圾桶圖標時，刪除對應(yīng)行，本文結(jié)合實例代碼給大家講解的非常詳細，需要的朋友可以參考下

vue 動態(tài)添加/刪除dom元素

需要在點擊添加時，增加一行key/value的輸入框；點擊垃圾桶圖標時，刪除對應(yīng)行

效果圖

核心：使用v-for來管理添加行數(shù)量。

<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> 添加請求參數(shù)</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;
 }

擴展：

vue中刪除dom元素節(jié)點

document.querySelectorAll(…).remove is not a function"

在這里插入圖片描述

document.querySelectorAll('.esedbox .triangle_b').remove()

因為document.querySelectorAll(‘.esedbox .triangle_b’)返回的不是數(shù)組，而是類數(shù)組，不能用remove方法（remove方法是dom元素節(jié)點的方法）

Array.from()方法主要用于將兩類對象(類似數(shù)組的對象[array-like object]和可遍歷對象[iterable]）轉(zhuǎn)為真正的數(shù)組。

正確的寫法：

     const cleardom = document.querySelectorAll('.esedbox .triangle_b, .triangle_p')
      Array.from(cleardom).forEach((item) => {
        item.remove()
      })

到此這篇關(guān)于vue 動態(tài)添加/刪除dom元素的文章就介紹到這了,更多相關(guān)vue刪除dom元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: