微信小程序开发系列(十九)·wxml语法·setData()修改数据

2024-03-06 06:44

本文主要是介绍微信小程序开发系列(十九)·wxml语法·setData()修改数据,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

步骤一:创建一个data对象

步骤二:双大括号写法的使用

步骤三:创建一个更新事件按钮

步骤四:定义事件处理函数·获取数据

步骤五:定义事件处理函数·修改数据

方法一:通过赋值的方式直接修改数据 

方法二:通过setData()方法

总结


        小程序中修改数据不推荐通过赋值的方式进行修改,通过赋值的方式修改数据无法改变页面的数据,而是要通过调用setData()方法进行修改,setData()方法接收对象作为参数,key是需要修改的数据,value是最新的值。

setData()方法有两个作用:

1.  更新数据

2.  驱动视图更新

步骤一:创建一个data对象

        找到index.js文件,将page内的代码删除,创建一个 data 对象:


Page({data:{num: 1}
}) 

步骤二:双大括号写法的使用

        找到index.wxml文件,将其内容删除,编写代码:

<view>{{ num }}</view>

步骤三:创建一个更新事件按钮

        在index.wxml创建一个更新事件:

<button bind:tap="updateNum">更新 num</button>

步骤四:定义事件处理函数·获取数据

        可以通过this获取数据:


Page({data:{num: 1},// 更新 numupdateNum(){// 获取数据console.log(this.data.num)}
}) 

步骤五:定义事件处理函数·修改数据

方法一:通过赋值的方式直接修改数据 
  // 通过赋值的方式直接修改数据this.data.num += 1console.log(this.data.num)

        可以看出这种方法能够修改数据,但是不能改变页面上的数据:

完整代码:


Page({data:{num: 1},// 更新 numupdateNum(){// 获取数据// console.log(this.data.num)// 通过赋值的方式直接修改数据this.data.num += 1console.log(this.data.num)//能够修改数据,但是不能改变页面上的数据}
}) 
方法二:通过setData()方法

        通过调用setData()方法进行修改,setData()方法接收对象作为参数,key是需要修改的数据,value是最新的值。

  this.setData({// key:是需要更新的数据// value:是最新的值num: this.data.num + 1})console.log(this.data.num)

        可以发现此时既能够修改数据,也能改变页面上的数据:

此时代码:


Page({data:{num: 1},// 更新 numupdateNum(){// 获取数据// console.log(this.data.num)// 通过赋值的方式直接修改数据// this.data.num += 1// console.log(this.data.num)//能够修改数据,但是不能改变页面上的数据// setData()方法有两个作用:// 1.  更新数据// 2.  驱动视图更新this.setData({// key:是需要更新的数据// value:是最新的值num: this.data.num + 1   })console.log(this.data.num)}
}) 

总结

        微信小程序中的setData()方法用于修改页面数据并实时更新视图,是实现动态数据绑定的重要方法之一。当数据发生变化时,可以通过调用setData()方法来更新页面上相应的数据,并自动触发视图的更新,以确保用户界面与最新的数据保持同步。

        使用setData()方法需要传入一个对象,该对象包含需要更新的数据字段及其对应的数值。当调用setData()方法后,页面上绑定了被修改数据的部分将会自动更新,反映最新的数据状态。

        在微信小程序中,使用setData()方法修改对象数据类型是一种常见的操作,可以实现动态更新页面上展示的对象数据。当页面需要展示对象类型的数据,并且该对象的属性值可能会发生变化时,就可以通过setData()方法来更新对象数据。

具体而言,通过setData()方法可以实现以下操作:

  1. 更新对象的特定属性: 可以通过指定对象属性的路径来更新对象中的特定属性。例如,使用this.setData({'person.name':'Bob'}) 可以更新对象中的name属性为'Bob'。

  2. 替换整个对象: 除了更新单个属性外,也可以通过直接替换整个对象来更新对象数据。例如,使用 this.setData({person:{ name : 'Charlie', age: 35, gender: 'male'}})可以替换整个person对象。

  3. 触发视图更新: 调用setData()方法后,会自动触发页面视图的更新,确保页面上展示的数据与最新的对象数据保持同步。

微信小程序开发_时光の尘的博客-CSDN博客

这篇关于微信小程序开发系列(十九)·wxml语法·setData()修改数据的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/779159

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展,我们的业务数据越来越多,单纯使用 MySQL 已经不能满足我们的数据查询需求,例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后,随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步,我们目前的解决方案是建立数据中间表。把需要检索的业务数据,统一放到一张M

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

异构存储(冷热数据分离)

异构存储主要解决不同的数据,存储在不同类型的硬盘中,达到最佳性能的问题。 异构存储Shell操作 (1)查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies (2)为指定路径(数据存储目录)设置指定的存储策略 hdfs storagepolicies -setStoragePo

Hadoop集群数据均衡之磁盘间数据均衡

生产环境,由于硬盘空间不足,往往需要增加一块硬盘。刚加载的硬盘没有数据时,可以执行磁盘数据均衡命令。(Hadoop3.x新特性) plan后面带的节点的名字必须是已经存在的,并且是需要均衡的节点。 如果节点不存在,会报如下错误: 如果节点只有一个硬盘的话,不会创建均衡计划: (1)生成均衡计划 hdfs diskbalancer -plan hadoop102 (2)执行均衡计划 hd

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl