小程序中动态增加与删除 JSON 对象数组的方法及代码展示

<view class="add-btn" bindtap=&#39;addItems&#39;>添加</view>

<view wx:for="{{itemLists}}" wx:key="index" class=&#39;list&#39;>

  <input type=&#39;text&#39; value=&#39;{{item.id}}&#39;></input>

  <text>{{item.time}}</text>

  <text class=&#39;delete-btn&#39; data-idx=&#39;{{index}}&#39; bindtap=&#39;deleteIitems&#39;>删除</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

    })

  }

})