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

news2024/10/25 14:22:59

合理使用 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.type
    console.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 = 0
        this.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 = 0
        const index2 = 1
        this.setData({
          [`object.list[${index1}].obj.number[${index2}]`]: this.data.object.list[index1].obj.number[index2] + 1
        })
        break;
      default:
        break;
    }
  }

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1842467.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算几何【Pick定理】

Pick 定理 Pick 定理&#xff1a;给定顶点均为整点的简单多边形&#xff0c;皮克定理说明了其面积 A {\displaystyle A} A 和内部格点数目 i {\displaystyle i} i、边上格点数目 b {\displaystyle b} b 的关系&#xff1a; A i b 2 − 1 {\displaystyle Ai{\frac {b}{2}}…

【Python驯化-01】python中set去重数据每次结果不一致问题解决

【Python驯化-01】python中set去重数据每次结果不一致问题解决 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内容文档关注…

计算机网络 —— 应用层(万维网)

计算机网络 —— 应用层&#xff08;万维网&#xff09; 万维网核心组成部分特点 URLHTTP版本请求消息结构响应消息结构工作流程 Cookie如何工作主要用途安全与隐私类型 Web缓存客户端缓存&#xff08;浏览器缓存&#xff09;服务器端缓存 今天我们来了解万维网&#xff1a; 万…

react18 实现具名插槽

效果预览 技术要点 当父组件给子组件传递的 JSX 超过一个标签时&#xff0c;子组件接收到的 children 是一个数组&#xff0c;通过解析数组中各 JSX 的属性 slot &#xff0c;即可实现具名插槽的分发&#xff01; 代码实现 Father.jsx import Child from "./Child";…

Java中OOP的概念及示例

Java中OOP的概念及示例 在本指南中&#xff0c;您将学习Java中的OOP概念。面向对象编程系统&#xff08;OOP&#xff09;是一种基于“对象”的编程概念。面向对象编程的主要目的是提高程序的可读性、灵活性和可维护性。 面向对象编程将数据及其行为集中在一个称为对象的实体中…

小学生杂志小学生杂志社小学生编辑部2024年第5期目录

教学研究 小学数学教学中易错题的纠正策略研究 黄喜军; 1-3 主题语境下小学英语作业多模态设计与实施策略研究 韩蓓; 4-6 小学美术教育中色彩教学的实施措施研究 顾雅洁; 7-9《小学生》投稿&#xff1a;cn7kantougao163.com 核心素养视域下小学英语单元整体教学…

Linux 6.10也引进了蓝屏机制

众所周知&#xff0c;win死机后会有个蓝屏死机的故障提示页面&#xff0c;Linux 6.10 开始也将引入这个机制。 Linux 6.10 引入了一个新的 DRM Panic 处理程序基础设施&#xff0c;以便于在致命错误&#xff08;Panic&#xff09;发生时显示相关信息。 Linux 6.10 还在开发之…

如何高效应用与精准选择温补晶振

温补晶振(TCXO)是一种重要的时序元件&#xff0c;因其高精度和高稳定性在通信、导航、测控等多个领域中扮演着关键角色。晶发电子接下来将为您详细阐述温补晶振的选用和使用方法&#xff0c;助您更好地理解和运用这一核心元件。 一、温补晶振的工作原理 温补晶振能够实现在广…

2024年【N1叉车司机】报名考试及N1叉车司机考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 N1叉车司机报名考试参考答案及N1叉车司机考试试题解析是安全生产模拟考试一点通题库老师及N1叉车司机操作证已考过的学员汇总&#xff0c;相对有效帮助N1叉车司机考试资料学员顺利通过考试。 1、【多选题】《特种设备…

Tailwindcss 扩展默认配置来自定义颜色

背景 项目里多个Tab标签都需要设置同样的背景颜色#F1F5FF&#xff0c;在集成tailwindcss之前就是重复该样式&#xff0c;如下图&#xff1a; .body {background-color: #f1f5ff; }集成tailwindcss时&#xff0c;我们希望在class中直接设置该背景色&#xff0c;但是默认的tai…

不懂索引,简历上都不敢写自己熟悉SQL优化

大家好&#xff0c;我是考哥。 今天给大家带来MySQL索引相关核心知识。对MySQL索引的理解甚至比你掌握SQL优化还重要&#xff0c;索引是优化SQL的前提和基础&#xff0c;我们一步步来先打好地基。 当MySQL表数据量不大时&#xff0c;缺少索引对查询性能的影响不会太大&#x…

递归算法:代码迷宫中的无限探索

✨✨✨学习的道路很枯燥&#xff0c;希望我们能并肩走下来! 目录 前言 一 深入理解递归 二 迭代VS递归 三 递归算法题目解析 3.1 汉诺塔问题 3.2 合并两个有序链表 3.3 反转链表 3.4 两两交换链表中的节点 3.5 Pow&#xff08;x&#xff0c;n&#xff09;&#xff08;快速幂)…

DAC测试实验——FPGA学习笔记7

一、DAC简介 DAC全称Digital to Analog Converter&#xff0c;即数模转换器。它用于将主控芯片产生的数字值(0和1)转换为模拟值(电压值)。 1、DAC参数指标 2、DAC类型 常用的DAC可大致分为权电阻网络DAC、T型电阻网络DAC、倒T型电阻网络DAC以及权电流型DAC。 3、AD9708/3PD9…

【stm32-新建工程-寄存器版本】

stm32-新建工程-寄存器版本 ■ 下载相关STM32Cube官方固件包&#xff08;F1&#xff0c;F4&#xff0c;F7&#xff0c;H7&#xff09;■ 1. ST官方搜索STM32Cube■ 2. 搜索 STM32Cube■ 3. 点击获取软件■ 4. 选择对应的版本下载■ 5. 输入账号信息■ 6. 出现下载弹框&#xff…

智能座舱中的HUD介绍

HUD&#xff08;Head Up Display&#xff0c;抬头显示系统&#xff09;是将车速、油耗、胎压等行车重要信息投影到前方挡风玻璃上的一套显示系统。HUD 最早应用在战斗机上&#xff0c;旨在降低飞行员低头查看仪表的频率&#xff0c;使得飞行员能在保证正常驾驶的同时&#xff0…

# 消息中间件 RocketMQ 高级功能和源码分析(七)

消息中间件 RocketMQ 高级功能和源码分析&#xff08;七&#xff09; 一、 消息中间件 RocketMQ 源码分析&#xff1a;消息存储核心类介绍 1、消息存储在 store 模块中。消息存储核心类 DefaultMessageStore.java 2、消息存储核心类介绍 private final MessageStoreConfig me…

汇编程序入门指南

什么是机器语言&#xff1f; 机器语言就是由二进制数字构成的程序&#xff0c;CPU 可以直接对其解释、执行。 汇编语言、C 语言、Java、BASIC 等编程语言编写的程序&#xff0c;也都需要先转换成机器语言才能被执行。机器语言有时也叫作“原生代码”&#xff08;Native Code&…

无线麦克风推荐哪些品牌,热门领夹无线麦克风哪个好,看本期文章

​在信息爆炸的今天&#xff0c;高品质的无线领夹麦克风能让声音更清晰响亮。技术发展带来多样化选择同时也带来选择困难。根据多年使用经验和行业反馈&#xff0c;我推荐一系列可靠、易用且性价比高的无线领夹麦克风&#xff0c;助你作出明智选择。还要不知道该怎么选无线领夹…

Day7—zookeeper基本操作

ZooKeeper介绍 ZooKeeper&#xff08;动物园管理员&#xff09;是一个分布式的、开源的分布式应用程序的协调服务框架&#xff0c;简称zk。ZooKeeper是Apache Hadoop 项目下的一个子项目&#xff0c;是一个树形目录服务。 ZooKeeper的主要功能 配置管理 分布式锁 集群管理…

【C++LeetCode】【热题100】两数相加【中等】-不同效率的题解【1】

题目&#xff1a; 暴力方法&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNo…