Mini programme : Comment ajouter et supprimer dynamiquement un tableau d'objets JSON (code ci-joint)-Développement de mini-programmes-php.cn

Mini programme : Comment ajouter et supprimer dynamiquement un tableau d'objets JSON (code ci-joint)

不言

Libérer： 2018-08-10 17:12:21

original

9209 Les gens l'ont consulté

Le contenu de cet article concerne les mini-programmes : comment ajouter et supprimer dynamiquement des tableaux d'objets JSON (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Regardez d'abord l'effet. Lors de la création de petits programmes, nous rencontrons souvent des situations comme celle-ci :

Allez directement au code :

<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>

Copier après la connexion

.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;
}

Copier après la connexion

Page({

  data: {
    itemLists: [
      { id: 1, time: &#39;00:00:00&#39; },
      { id: 2, time: &#39;00:00:00&#39; },
      { id: 3, time: &#39;00:00:00&#39; }
    ]
  },
  addItems() {
    let list = this.data.itemLists
    list.push({ id: ~~(Math.random()*100), time: &#39;00:00:00&#39; })
    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
    })
  }

})

Copier après la connexion

Résumé :

La clé est d'utiliser la méthode de filtrage dans ES6 pour supprimer le premier objet du tableau d'objets.

Le filtrage est plus souvent utilisé pour filtrer un contenu spécifié.

Recommandations associées :

Exemple de mini-programme WeChat : Comment appeler Tencent Map pour obtenir des données jsonp

Comment appeler l'implémentation de l'API dans Demande de données du programme WeChat Mini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!