当前位置: 首页 > news >正文

微信小程序 this.setData高级用法(只更改单个数据)

合理使用 setData | 微信开放文档

1、页面

<view class="h-100px"></view>
<view>最简单的数据:</view>
<button bind:tap="handleAdd" data-type="1">点我加 1: {{text}}</button>
<view>对象的数据:</view>
<button bind:tap="handleAdd" data-type="2">点我加 1: {{params.text}}</button>
<view>数组的数据</view>
<button bind:tap="handleAdd" data-type="3">点我加 1: {{paramsArray[0].text}}</button>
<view>超复杂的数据</view>
<button bind:tap="handleAdd" data-type="4">点我加 1: {{object.list[0].obj.number[1]}}</button>
<view class="h-100px"></view>

2、js

    text: 0,params: {text: 0},paramsArray: [{text: 0}],object: {list: [{obj: {number: [0, 1]}}]}handleAdd(e: ViewClickDataItem) {const type = e.currentTarget.dataset.typeconsole.log('type', type);switch (type) {case '1':this.setData({text: this.data.text + 1})break;case '2':/**第一种写法 不推荐 */// this.setData({//   params: {//     ...this.data.params,//     text: this.data.params.text + 1//   }// })/**第二种写法 */// this.setData({//   'params.text': this.data.params.text + 1// })/**第三种写法 */const key = 'text'this.setData({[`params.${key}`]: this.data.params.text + 1})break;case '3':/**第一种 不推荐 */// const newData = this.data.paramsArray// newData[0].text = newData[0].text + 1// this.setData({//   paramsArray: newData// })/**第二种写法 推荐*/const index = 0this.setData({[`paramsArray[${index}].text`]: this.data.paramsArray[index].text + 1})break;case '4':/**第一种 不推荐 */// const newData = this.data.object// newData.list[0].obj.number[1] = newData.list[0].obj.number[1] + 1// this.setData({//   object: newData// })/**第二种写法 推荐*/const index1 = 0const index2 = 1this.setData({[`object.list[${index1}].obj.number[${index2}]`]: this.data.object.list[index1].obj.number[index2] + 1})break;default:break;}}

ps: 上诉代码的核心就是只对其中一个变量或者一些变量进行更新操作 不会导致整个数据变动,加快数据渲染。

http://www.lryc.cn/news/377497.html

相关文章:

  • 使用npm发布自己的插件包
  • 前端入门篇(五十二)练习6:transition过渡小动画
  • scrapy模块的基础使用
  • 如何在不降低网络安全防护的前提下,优化pcdn的流量清洗效率?
  • linux发行版CentOS、Debian和Ubuntu的对比
  • WordPress如何删除内存中的缓存?
  • 【XML模版文件参数初始化】
  • Golang | Leetcode Golang题解之第160题相交链表
  • 基于FOC控制器的BLDC无刷直流电机控制系统matlab编程与仿真
  • ffmpeg转换视频格式
  • 设计程序,利用栈实现数值转换
  • QSharedMemory使用详解
  • 中电金信:保险业多项举措共绘数字化转型新篇章
  • Gartner发布2024年人工智能技术成熟度曲线:29项决定人工智能领域发展方向的前沿和趋势性技术
  • 顺势而为:雷军、小米与创业成功的深层思考
  • Java+ffmpeg 合并两个mp4文件
  • 汽车IVI中控开发入门及进阶(三十一):视频知识扫盲
  • 【后端】Java学习笔记(二周目-1)
  • PDF文档翻译软件哪个好?分享5款快速翻译的工具
  • 哪些因素驱动新零售发展?新零售与传统零售、电子商务区别在哪?
  • 使用代理IP常见问题及解答
  • 重磅!鹅厂大牛带你30分钟玩转AI智能结对编程!
  • 研究Redis源码的一些前期准备
  • 用PHP来调用API给自己定制一个“每日新闻”
  • AGI时代,程序员想学习大语言模型(LLM),应该从哪里开始?
  • Vue在表单校验中trigger属性指定何时触发校验规则
  • 【多线程实例】
  • 数据治理在数据提取中的角色:确保数据质量和安全
  • Nuxt快速学习开发 - Nuxt3静态资源Assets
  • 为什么企业需要数据挖掘平台?哪个比较好呢?