vue 實現在同一界面實現組件的動態(tài)添加和刪除功能
更新時間：2020年06月16日 11:02:53 作者：似水流年，是誰蒼白了等待
這篇文章主要介紹了vue 實現在同一界面實現組件的動態(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標簽設置刪除按鈕，運用splice函數。 -->
<i class="el-icon-remove-outline"
style="margin-left:20px"
@click="questionList.splice(index, 1)"
></i>
2.增
在方法添加按鈕，在點擊添加按鈕的時候將需要的參數傳進數組，遍歷數組，達到組件渲染。
//添加試題，組件循環(huán)顯示
addQuestion() {
console.log("添加試題");
this.questionList.unshift({
mineStatusValue: this.mineStatusValue,
questionoptions: this.questionoptions,
count: this.count,
sourcess: this.sourcess,
});
},
3.刪
根據選中的組件，獲取它的索引，根據下標把它刪掉，更新數組，重選渲染組件。
注：刪除的時候用到了splic函數，具體的使用可以自己了解。
<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');
總結
到此這篇關于vue 實現在同一界面實現組件的動態(tài)添加和刪除的文章就介紹到這了,更多相關vue 組件動態(tài)添加和刪除內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue3中ref獲取子組件值的相關資料,在Vue3中父組件獲取子組件的值可以通過使用'ref'和'$refs'來實現,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實踐)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了如何利用Vue實現多點涂鴉效果，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以跟隨小編一起學習一下2023-03-03
Lottie 是一個適用于 Android、iOS、Web 和 Windows 的庫,它使用 Bodymovin 解析導出為 JSON 的 Adobe After Effects 動畫,下面我們就來看看它在vue中的是如何應用的吧2023-12-12
Vue Cli3 打包配置并自動忽略console.log語句的方法
這篇文章主要介紹了Vue Cli3 打包配置并自動忽略console.log語句的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
當我們談論或討論在?Vue?中創(chuàng)建用戶界面組件時,經常會提到可重用性,在?Vue?中創(chuàng)建真正的可重用組件可能很棘手,在本文中,我將探討可重用組件的概念、應用這些組件時面臨的問題,以及為什么必須盡可能克服這些問題,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關于vue中路由參數傳遞遇到的坑的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
本文主要介紹了Vue3+Element+Ts實現表單的基礎搜索重置等功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
下面小編就為大家分享一篇Axios 常用的請求方法別名，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在vue中使用echarts(折線圖的demo,markline用法)
這篇文章主要介紹了在vue中使用echarts(折線圖的demo,markline用法)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07