关于前端:如何操作小程序页面中data数据区中的数据

前言

在微信小程序中，每一个页面都有一个独立的 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.data.student.length;i++){
   this.setData({['student[' + i + '].sex']:'女'
   })
} 

总结

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

批改数据区中的根本数据类型数据，或者对数组中所有数组元素进行对立批改，都能够间接援用变量名或数组名；若要批改数组元素、对象成员、JSON 数组中某个数组元素的成员，都要用引号将其扩住。

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