热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

小程序:如何动态增加删除JSON对象数组(附代码)

本篇文章给大家带来的内容是关于小程序:如何动态增加删除JSON对象数组(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本篇文章给大家带来的内容是关于小程序:如何动态增加删除JSON对象数组(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

直接上代码:

添加


  
  {{item.time}}
  删除
.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 CLI 基础入门指南
    本文详细介绍了 Vue CLI 的基础使用方法,包括环境搭建、项目创建、常见配置及路由管理等内容,适合初学者快速掌握 Vue 开发环境。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文探讨了如何在Docker构建过程中使用动态环境变量,特别是针对Docker v1.9及以上版本的用户。我们将介绍如何声明和使用构建参数,以及这些参数对构建缓存的影响。 ... [详细]
  • 本文探讨了如何将Python对象转换为字节流,以实现文件保存、数据库存储或网络传输的需求。主要介绍了利用pickle模块进行序列化的具体方法。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • 在Asp.Net MVC框架下,相较于直接在视图中返回数据,越来越多的场景倾向于采用返回Json数据的方式。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • publicclassBindActionextendsActionSupport{privateStringproString;privateStringcitString; ... [详细]
  • 本文介绍了SELinux的两种主要工作模式——强制模式和宽容模式,并提供了如何在CentOS 7中正确启用和配置SELinux的方法,以及在遇到登录问题时的解决策略。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • OBS Studio自动化实践:利用脚本批量生成录制场景
    本文探讨了如何利用OBS Studio进行高效录屏,并通过脚本实现场景的自动生成。适合对自动化办公感兴趣的读者。 ... [详细]
  • 近期尝试从www.hub.sciverse.com网站通过编程手段获取数据时遇到问题,起初尝试使用WebBrowser控件进行数据抓取,但发现使用GET方法翻页时,返回的HTML代码始终相同。进一步探究后了解到,该网站的数据是通过Ajax异步加载的,可通过HTTP查看详细的JSON响应。 ... [详细]
  • Jupyter Notebook多语言环境搭建指南
    本文详细介绍了如何在Linux环境下为Jupyter Notebook配置Python、Python3、R及Go四种编程语言的环境,包括必要的软件安装和配置步骤。 ... [详细]
  • 本文详细介绍了如何利用 Bootstrap Table 实现数据展示与操作,包括数据加载、表格配置及前后端交互等关键步骤。 ... [详细]
  • 本文介绍了如何正确配置Ajax POST请求,以确保前端发送的数据能够被后端正确解析。重点在于前端JSON对象的键名需要与后端实体类的字段名严格匹配。 ... [详细]
author-avatar
最陌生的挣扎2502893263
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有