您好,登錄后才能下訂單哦!
添加核心代碼如下:
this.data.push({ type: [{ value: '選項(xiàng)1', label: 'in' }, { value: '選項(xiàng)3', label: 'out' }], value:[{ value: '選項(xiàng)1', label: 'CSV' }, { value: '選項(xiàng)3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, });
刪除核心代碼如下:
/*遍歷數(shù)組,然后根據(jù)選中的狀態(tài)獲取對(duì)應(yīng)的下標(biāo),然后進(jìn)行刪除*/ for (let i = 0;i<this.data.length;i++){ let obj = this.data[i]; if (obj.isDelete){ this.data.splice(i,1); i-- } }
全部代碼如下:
<template> <div> ============================32、在Vue項(xiàng)目中實(shí)現(xiàn)動(dòng)態(tài)添加或者刪除對(duì)象和對(duì)象數(shù)組============================ <div> <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> <el-button type="primary" icon="el-icon-delete" @click="deleteItem"></el-button> <el-row :gutter="50" v-for="(item,index) in data" :key="index"> <!--Type--> <el-col :span="4"> <div class="grid-content bg-purple"> <el-row > <el-col :span="24"> <el-select v-model="value" placeholder="請(qǐng)選擇" size="mini"> <el-option v-for="obj in item.type" :key="obj.value" :label="obj.label" :value="obj.value"> </el-option> </el-select> </el-col> </el-row > </div> </el-col> <!--value--> <el-col :span="4"> <div class="grid-content bg-purple-light"> <el-row > <el-col :span="24"> <el-select v-model="value" placeholder="請(qǐng)選擇" size="mini"> <el-option v-for="obj in item.value" :key="obj.value" :label="obj.label" :value="obj.value"> </el-option> </el-select> </el-col> </el-row > </div> </el-col> <!--Parameter--> <el-col :span="4"> <div class="grid-content bg-purple"> <el-input size="mini" placeholder="請(qǐng)輸入內(nèi)容" v-model="item.parameter" clearable> </el-input> </div> </el-col> <!--Default--> <el-col :span="4"> <div class="grid-content bg-purple-light"> <el-input size="mini" placeholder="請(qǐng)輸入內(nèi)容" v-model="item.default" clearable> </el-input> </div> </el-col> <!--Description--> <el-col :span="4"> <div class="grid-content bg-purple"> <el-input size="mini" placeholder="請(qǐng)輸入內(nèi)容" v-model="item.description" clearable> </el-input> </div> </el-col> <!--Del--> <el-col :span="4"> <div class="grid-content bg-purple-light " id="checkboxSpacingDiv"> <!-- `checked` 為 true 或 false --> <el-checkbox v-model="item.isDelete" size="medium"></el-checkbox> </div> </el-col> </el-row> </div> </div> </template> <script> export default { name: "VueArrays_32", data(){ return { data:[ { type: [{ value: '選項(xiàng)1', label: 'in' }, { value: '選項(xiàng)3', label: 'out' }], value:[{ value: '選項(xiàng)1', label: 'CSV' }, { value: '選項(xiàng)3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }, ], } }, methods:{ add(){ this.data.push({ type: [{ value: '選項(xiàng)1', label: 'in' }, { value: '選項(xiàng)3', label: 'out' }], value:[{ value: '選項(xiàng)1', label: 'CSV' }, { value: '選項(xiàng)3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); }, deleteItem(){ /*遍歷數(shù)組,然后根據(jù)選中的狀態(tài)獲取對(duì)應(yīng)的下標(biāo),然后進(jìn)行刪除*/ for (let i = 0;i<this.data.length;i++){ let obj = this.data[i]; if (obj.isDelete){ this.data.splice(i,1); i-- } } } } } </script> <style scoped> </style>
效果圖如下:
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)動(dòng)態(tài)添加或者刪除對(duì)象和對(duì)象數(shù)組的操作方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。