前言

在微信小程序中，每一个页面都有一个独立的js文件，用来实现该页面的业务逻辑。这个js文件通常采用Page()方法来对页面进行注册。其中系统为页面设置了一个名为data的区域，用来存储页面的初始数据，我们将其称为小程序页面的数据区。

小程序页面的数据区是采用对象的形式来进行数据设定的。那么我们该如何操作数据区中的数据呢？

一、输出数据区中的数据：

由于在小程序页面中，关键字this指向这个页面利用Page()方法注册的页面实例，因此要想引用data数据区中的数据，可以采用如下所示的语法格式。

this.data.数据区变量名

例如：页面数据区data中有一个名为title的变量，在控制台中输出该变量的值。

console.log(this.data.title);

二、修改数据区中的数据：

修改小程序页面数据区data中的数据要采用this.setData()方法，该方法的语法格式如下所示。

this.setData({
数据区变量名1:数据,
数据区变量名2:数据,
…
});

1、修改数据区中的基本数据类型数据：

例如：data数据区有一个title数据，修改该变量的值为“商品标题”。

this.setData({   title:'商品标题'        //将数据区中的title变量修改为"商品标题"})

2、修改数据区中的数组数据：

例如：data数据区有一个arr数组，修改该数组中所有数组元素的内容。

this.setData({   arr:['a','b']         //将数据区中的arr数组的元素修改为字符"a"和字符"b"})

3、修改数据区中的数组元素：

例如：data数据区有一个arr数组，修改该数组中索引值为0的数组元素为字符"A"。

this.setData({   'arr[0]':'A'         //将数据区的arr数组中索引值为0的元素改为字符'A'})

4、修改数据区中的对象成员：

例如：data数据区有一个obj对象，修改该对象中的成员x为3000。

this.setData({   'obj.x':3000        //将数据区的obj对象中的x成员改为3000})

5、修改数据区中JSON数组中的成员：

例如：data数据区有一个JSON数组student，修改索引值为1的数组元素中的phone成员为”15912345678“。

this.setData({   'student[1].phone':'15912345678'    })

6、结合循环变量修改JSON数组：

例如：data数据区有一个JSON数组student，结合for循环，将该数组中每一个数组元素的sex成员均改为”女“。

for(let i=0;i

总结

在微信小程序中操作数据区，要使用关键字this进行配合。读取数据要使用this.data来实现，修改数据要使用this.setData()方法来实现。

修改数据区中的基本数据类型数据，或者对数组中所有数组元素进行统一修改，都可以直接引用变量名或数组名；若要修改数组元素、对象成员、JSON数组中某个数组元素的成员，都要用引号将其扩住。

若要结合循环改变每一个数组元素中任意成员的值，还用使用 + 与循环变量进行拼接，此时整个拼接的字符串还需要用 [ ] 扩住。

如何在data visualization 中update svg_如何操作小程序页面中data数据区中的数据相关推荐

微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
小程序如何用data的数据控制页面展示_17. 教你零基础搭建小程序：小程序事件绑定（1）
本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面,如下图: 再在页面的最上方放 ...
微信小程序怎么新建php文件,微信小程序中创建小程序页面的步骤介绍（图文）...
本篇文章给大家带来的内容是关于微信小程序之创建小程序页面的步骤介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 创建一个简单的页面,创建小程序页面的具体几个步骤: 1. 在page ...
如何把小程序游戏运行到自有App中？（IOS篇）
千呼万唤始出来!FinClip 终于支持小游戏了. 我们团队算是 FinClip 的老用户了,年初就向官方提出了希望 FinClip 支持微信小游戏的建议.随着前段时间 "羊了个羊" ...
如何把小程序游戏运行到自有app中？
千呼万唤始出来!FinClip终于支持小游戏了. 我们团队算是FinClip的老用户了,年初就向官方提出了希望FinClip 支持微信小游戏的建议.随着前段时间"羊了个羊"微信小游 ...
微信小程序：未找到 app.json 中的定义的 pages “pages/index/index“ 对应的 WXML 文件
微信小程序:未找到 app.json 中的定义的 pages "pages/index/index" 对应的 WXML 文件前情:本人在自学微信小程序时,遇到了调用模板出现错误的 ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...

如何在data visualization 中update svg_如何操作小程序页面中data数据区中的数据

前言