上一篇：小程序?qū)W習(xí)筆記-4：頁(yè)面之間跳轉(zhuǎn)
本篇內(nèi)容
* 使用假數(shù)據(jù)的方式完成數(shù)據(jù)綁定
小程序中的數(shù)據(jù)綁定
WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data咐低。使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)湾宙，{{}}中可以放置變量朦佩、運(yùn)算、組合（生成新的對(duì)象或數(shù)組）蔬芥。
<!--變量-->
<view> {{ message }} </view>
<!--運(yùn)算-->
<view hidden="{{flag ? true : false}}"> Hidden </view>
<!--組合-->
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
message: 'Hello MINA!',
flag: true,
zero: 0
}
}
具體見 小程序官方文檔-框架-WXML語(yǔ)法參考-數(shù)據(jù)綁定。
在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件述召。
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名
wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名
wx:key 可以指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符
具體見 小程序官方文檔-框架-WXML語(yǔ)法參考-列表渲染蟹地。
響應(yīng)的數(shù)據(jù)綁定
數(shù)據(jù)綁定后积暖，在邏輯層修改數(shù)據(jù)，視圖層會(huì)響應(yīng)更新怪与。在邏輯層修改數(shù)據(jù)需要使用setData夺刑。
setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對(duì)應(yīng)的 this.data 的值（同步）分别。
只需要設(shè)置變化的值即可遍愿，無(wú)需重復(fù)設(shè)置其他值，小程序會(huì)自動(dòng)合并更新耘斩。
this.setData({
message: 'Bye, MINA!'
})
注意：
直接修改 this.data 而不調(diào)用 this.setData 是無(wú)法改變頁(yè)面的狀態(tài)的沼填，還會(huì)造成數(shù)據(jù)不一致。
僅支持設(shè)置可 JSON 化的數(shù)據(jù)括授。
單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB坞笙，請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。
請(qǐng)不要把 data 中任何一項(xiàng)的 value 設(shè)為 undefined 荚虚，否則這一項(xiàng)將不被設(shè)置并可能遺留一些潛在問題薛夜。
總結(jié):
本篇學(xué)習(xí)記錄了微信小程序中的數(shù)據(jù)綁定。
參考:
小程序官方文檔-框架-WXML語(yǔ)法參考
小程序官方文檔-框架-框架-框架接口-頁(yè)面-Page-setData
