先看效果，在制作小程序时，经常遇到类似这种情况：



直接上代码：

<view class="add-btn" bindtap='addItems'>添加</view>

<view wx:for="{{itemLists}}" wx:key="index" class='list'>
  <input type='text' value='{{item.id}}'></input>
  <text>{{item.time}}</text>
  <text class='delete-btn' data-idx='{{index}}' bindtap='deleteIitems'>删除</text>
</view>

.add-btn{
  background: chocolate;
  width: 200rpx;
  text-align: center;
  color: white;
  margin-bottom: 10px;
}
.list{
  display: flex;
  justify-content: space-around;
  border: 1px solid;
}
.delete-btn{
  background: red;
}

Page({

  data: {
    itemLists: [
      { id: 1, time: '00:00:00' },
      { id: 2, time: '00:00:00' },
      { id: 3, time: '00:00:00' }
    ]
  },
  addItems() {
    let list = this.data.itemLists
    list.push({ id: ~~(Math.random()*100), time: '00:00:00' })
    this.setData({
      itemLists: list
    })
  },
  deleteIitems(e) {
    let idx = e.currentTarget.dataset.idx
    let list = this.data.itemLists
    let filterRes = list.filter((ele,index) => {
      return index != idx
    })
    this.setData({
      itemLists: filterRes
    })
  }

})

总结：

关键处是使用ES6中的filter过滤方法，删除对象数组中的第几个对象。

过滤更多的时候是用在过滤掉指定的内容。

在Vue项目中对数组进行动态添加或者删除对象和对象数组
发布时间：2018-09-21 11:27,
浏览次数：2947
, 标签：
Vue
添加核心代码如下：
this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label:
'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV'
}], parameter:'', default:'', description:'', isDelete:false, });
删除核心代码如下：
/*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/ for (let i = 0;i
obj = this.data[i]; if (obj.isDelete){ this.data.splice(i,1); i-- } }
全部代码如下：
============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================
 
@click="deleteItem">
 
placeholder="请选择" size="mini"> 
:key="obj.value" :label="obj.label" :value="obj.value"> 
 
:span="4"> 
 
:span="24"> 
:value="obj.value"> 
  
 
clearable> 
 
class="grid-content bg-purple-light"> 
v-model="item.default" clearable> 
 
 
class="grid-content bg-purple-light " id="checkboxSpacingDiv">  
size="medium">
 
 
 
data:[ { type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }],
value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }],
parameter:'', default:'', description:'', isDelete:false, }, ], } }, methods:{
add(){ this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3',
label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label:
'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); },
deleteItem(){ /*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/ for (let i =
0;i
this.data.splice(i,1); i-- } } } } }  
效果图如下：

添加核心代码如下：

          this.data.push({
            type: [{
              value: '选项1',
              label: 'in'
            },
              {
                value: '选项3',
                label: 'out'
              }],
            value:[{
              value: '选项1',
              label: 'CSV'
            },
              {
                value: '选项3',
                label: 'TSV'
              }],
            parameter:'',
            default:'',
            description:'',
            isDelete:false,
          });

 

删除核心代码如下：

       /*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/
          for (let i = 0;i<this.data.length;i++){
            let obj = this.data[i];
            if (obj.isDelete){
              this.data.splice(i,1);
            }
          }

 

全部代码如下：

<template>
    <div>
      ============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================
      <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="请选择" 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="请选择" 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="请输入内容"
                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="请输入内容"
                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="请输入内容"
                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: '选项1',
                  label: 'in'
                },
                  {
                    value: '选项3',
                    label: 'out'
                  }],
                value:[{
                  value: '选项1',
                  label: 'CSV'
                },
                  {
                    value: '选项3',
                    label: 'TSV'
                  }],
                parameter:'',
                default:'',
                description:'',
                isDelete:false,
              },
            ],

          }
      },
      methods:{
        add(){

          this.data.push({
            type: [{
              value: '选项1',
              label: 'in'
            },
              {
                value: '选项3',
                label: 'out'
              }],
            value:[{
              value: '选项1',
              label: 'CSV'
            },
              {
                value: '选项3',
                label: 'TSV'
              }],
            parameter:'',
            default:'',
            description:'',
            isDelete:false,
          });

        },
        deleteItem(){
          /*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/
          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>


 效果图如下：



 

 

 

更多技术请关注QQ群：636212586





 

添加核心代码如下：
this.data.push({
type: [{
value: '选项1',
label: 'in'
},
{
value: '选项3',
label: 'out'
}],
value:[{
value: '选项1',
label: 'CSV'
},
{
value: '选项3',
label: 'TSV'
}],
parameter:'',
default:'',
description:'',
isDelete:false,
});
删除核心代码如下：
/*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/
for (let i = 0;i
let obj = this.data[i];
if (obj.isDelete){
this.data.splice(i,1);
i--
}
}
全部代码如下：
============================32、在Vue项目中实现动态添加或者删除对象和对象数组============================
v-for="obj in item.type"
:key="obj.value"
:label="obj.label"
:value="obj.value">
v-for="obj in item.value"
:key="obj.value"
:label="obj.label"
:value="obj.value">
size="mini"
placeholder="请输入内容"
v-model="item.parameter"
clearable>
size="mini"
placeholder="请输入内容"
v-model="item.default"
clearable>
size="mini"
placeholder="请输入内容"
v-model="item.description"
clearable>
export default {
name: "VueArrays_32",
data(){
return {
data:[
{
type: [{
value: '选项1',
label: 'in'
},
{
value: '选项3',
label: 'out'
}],
value:[{
value: '选项1',
label: 'CSV'
},
{
value: '选项3',
label: 'TSV'
}],
parameter:'',
default:'',
description:'',
isDelete:false,
},
],
}
},
methods:{
add(){
this.data.push({
type: [{
value: '选项1',
label: 'in'
},
{
value: '选项3',
label: 'out'
}],
value:[{
value: '选项1',
label: 'CSV'
},
{
value: '选项3',
label: 'TSV'
}],
parameter:'',
default:'',
description:'',
isDelete:false,
});
},
deleteItem(){
/*遍历数组，然后根据选中的状态获取对应的下标，然后进行删除*/
for (let i = 0;i
let obj = this.data[i];
if (obj.isDelete){
this.data.splice(i,1);
i--
}
}
}
}
}
效果图如下：
总结
以上所述是小编给大家介绍的Vue实现动态添加或者删除对象和对象数组的操作方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！