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

不言
Libérer: 2018-08-10 17:12:21
original
9179 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal