如何操做小程序頁面中data數據區中的數據

前言

在微信小程序中，每個頁面都有一個獨立的js文件，用來實現該頁面的業務邏輯。這個js文件一般採用Page()方法來對頁面進行註冊。其中系統爲頁面設置了一個名爲data的區域，用來存儲頁面的初始數據，咱們將其稱爲小程序頁面的數據區。

小程序頁面的數據區是採用對象的形式來進行數據設定的。那麼咱們該如何操做數據區中的數據呢？

---

1、輸出數據區中的數據：

因爲在小程序頁面中，關鍵字this指向這個頁面利用Page()方法註冊的頁面實例，所以要想引用data數據區中的數據，能夠採用以下所示的語法格式。

this.data.數據區變量名

例如：頁面數據區data中有一個名爲title的變量，在控制檯中輸出該變量的值。

console.log(this.data.title);

2、修改數據區中的數據：

修改小程序頁面數據區data中的數據要採用this.setData()方法，該方法的語法格式以下所示。

this.setData({
     數據區變量名1:數據,
     數據區變量名2:數據,
     …
});

一、修改數據區中的基本數據類型數據：

例如：data數據區有一個title數據，修改該變量的值爲「商品標題」。

this.setData({
   title:'商品標題'        //將數據區中的title變量修改成"商品標題"
})

二、修改數據區中的數組數據：

例如：data數據區有一個arr數組，修改該數組中全部數組元素的內容。

this.setData({
   arr:['a','b']         //將數據區中的arr數組的元素修改成字符"a"和字符"b"
})

三、修改數據區中的數組元素：

例如：data數據區有一個arr數組，修改該數組中索引值爲0的數組元素爲字符"A"。

this.setData({
   'arr[0]':'A'         //將數據區的arr數組中索引值爲0的元素改成字符'A'
})

四、修改數據區中的對象成員：

例如：data數據區有一個obj對象，修改該對象中的成員x爲3000。

this.setData({
   'obj.x':3000        //將數據區的obj對象中的x成員改成3000
})

五、修改數據區中JSON數組中的成員：

例如：data數據區有一個JSON數組student，修改索引值爲1的數組元素中的phone成員爲」15912345678「。

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

六、結合循環變量修改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數組中某個數組元素的成員，都要用引號將其擴住。

若要結合循環改變每個數組元素中任意成員的值，還用使用 + 與循環變量進行拼接，此時整個拼接的字符串還須要用 [ ] 擴住。