vue 實現(xiàn)在同一界面實現(xiàn)組件的動態(tài)添加和刪除功能
更新時間：2020年06月16日 11:02:53 作者：似水流年，是誰蒼白了等待
這篇文章主要介紹了vue 實現(xiàn)在同一界面實現(xiàn)組件的動態(tài)添加和刪除,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.插入靜態(tài)組件，將自己想要循環(huán)的組件顯示在頁面上，利用v-for進行循環(huán)操作，操作包括增刪。
//所有要顯示的子組件，寫在一個li標簽，有 v-for循環(huán)。
<li v-for="(item, index) in questionList" v-bind:key="index">
<el-row :gutter="20">
<el-col offset="2" :span="4">
<el-select
size="small"
v-model="chooseValue"
multiple
placeholdr="請選擇試題類型"
style="width:200px;margin-left:-40px"
>
<el-option :value="item.mineStatusValue" style="height:auto">
<el-tree
:data="data"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
</el-option>
</el-select>
</el-col>
<el-col offset="3" :span="3">
<el-select
style="margin-left:-30px"
size="small"
v-model="item.value"
placeholder="請選擇">
<el-option
v-for="item in questionoptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
<el-col offset="2" :span="4">
<el-input style="width:45px;" size="small" v-model="count">
{{ item.count }}
</el-input>
<label> /0 </label>
</el-col>
<el-col :span="6">
<el-input style="width:45px;" size="small" v-model="sourcess">
{{ item.sourcess }}
</el-input>
<label> </label>
<!-- 在i標簽設(shè)置刪除按鈕，運用splice函數(shù)。 -->
<i class="el-icon-remove-outline"
style="margin-left:20px"
@click="questionList.splice(index, 1)"
></i>
2.增
在方法添加按鈕，在點擊添加按鈕的時候?qū)⑿枰膮?shù)傳進數(shù)組，遍歷數(shù)組，達到組件渲染。
//添加試題，組件循環(huán)顯示
addQuestion() {
console.log("添加試題");
this.questionList.unshift({
mineStatusValue: this.mineStatusValue,
questionoptions: this.questionoptions,
count: this.count,
sourcess: this.sourcess,
});
},
3.刪
根據(jù)選中的組件，獲取它的索引，根據(jù)下標把它刪掉，更新數(shù)組，重選渲染組件。
注：刪除的時候用到了splic函數(shù)，具體的使用可以自己了解。
<i class="el-icon-remove-outline" style="margin-left:20px" @click="questionList.splice(index, 1)"> </i>
4.效果
PS：在Vue組件上動態(tài)添加和刪除屬性方法
如下所示：
在組件上添加屬性 this.$set(this.data,"obj",value');
刪除屬性this.$delete(this.data,"obj",value');
總結(jié)
到此這篇關(guān)于vue 實現(xiàn)在同一界面實現(xiàn)組件的動態(tài)添加和刪除的文章就介紹到這了,更多相關(guān)vue 組件動態(tài)添加和刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)
這篇文章主要介紹了vue如何實現(xiàn)列表自動滾動、向上滾動的效果(vue-seamless-scroll)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue 2.0 偵聽器 watch屬性代碼詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當我們?yōu)g覽頁面時,只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動時再繼續(xù)加載后面的圖片,需要的朋友可以參考下2023-07-07
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實現(xiàn)
當面對大量數(shù)據(jù)時,一次性加載所有數(shù)據(jù)可能會導致性能問題,我們可以實現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了vue2嵌套路由實現(xiàn)方法,結(jié)合實例形式分析了vue2嵌套路由基本實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-03-03
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項目實戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
本文主要介紹Vue.js中監(jiān)聽器和計算屬性的相關(guān)知識點，包括對普通屬性的監(jiān)聽、對對象的監(jiān)聽、對數(shù)組的監(jiān)聽，以及計算屬性的Set方法，計算屬性與監(jiān)聽器的區(qū)別等等2021-05-05
vue項目中如何實現(xiàn)網(wǎng)頁的截圖功能?(html2canvas)
這篇文章主要介紹了vue項目中如何實現(xiàn)網(wǎng)頁的截圖功能?(html2canvas)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02