vue 動態(tài)添加/刪除dom元素節(jié)點(diǎn)的操作代碼
vue 動態(tài)添加/刪除dom元素
需要在點(diǎn)擊添加時,增加一行key/value的輸入框;點(diǎn)擊垃圾桶圖標(biāo)時,刪除對應(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;
}擴(kuò)展:
vue中刪除dom元素節(jié)點(diǎn)
document.querySelectorAll(…).remove is not a function"

document.querySelectorAll('.esedbox .triangle_b').remove()因?yàn)?strong>document.querySelectorAll(‘.esedbox .triangle_b’)返回的不是數(shù)組,而是類數(shù)組,不能用remove方法(remove方法是dom元素節(jié)點(diǎn)的方法)
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Vue3實(shí)現(xiàn)canvas畫布組件自定義畫板實(shí)例代碼
Vue?Canvas是一個基于Vue.js的輕量級畫板組件,旨在提供一個簡易的畫布功能,用戶可以在網(wǎng)頁上進(jìn)行自由繪圖,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue3(ts)使用vee-validate表單校驗(yàn),自定義全局驗(yàn)證規(guī)則說明
這篇文章主要介紹了Vue3(ts)使用vee-validate表單校驗(yàn),自定義全局驗(yàn)證規(guī)則說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示
這篇文章主要介紹了Vue拿到二進(jìn)制流圖片如何轉(zhuǎn)為正常圖片并顯示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06
Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

