教程接上篇，當需要展示一組數據時，可以使用wx:for

//.wxml <view wx:for="{{array}}">{{index}}: {{item.message}} </view>//.js age({data: {array: [{message: 'foo',}, {message: 'bar'}]} })

其中index是當前數據索引的默認變量名，item是當前數據項的默認變量名。
也可以使用 wx:for-item 和 wx:for-index 來指定別名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}} </view>

也可以嵌套使用，如下面是一個九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view> </view>

類似block wx:if，也可以將wx:for用在<block/>標簽上，以渲染一個包含多節點的結構塊

<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view> </block>

wx:key

要理解為什么需要wx:key，先來看一個例子:

//.wxml <checkbox wx:for="{{objectArray}}" value="{{item.name}}" style="display: block;"> {{item.name}} </checkbox> <button bindtap="addToFront">在上方添加一個新的check組件</button>//.js Page({data: {objectArray: [{id: 1, name: '我沒有被選中'},{id: 2, name: '我沒有被選中'},],},addToFront: function(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{id: length, name: '我沒有被選中'}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})}, })

上面的代碼創建了兩個checkbox組件和一個按鈕，當點擊按鈕會在最上方新增一個checkbox組件。
編譯代碼，會顯示如下界面:

點擊按鈕，界面如下：

ok，到這里一切正常 ，為了更好的說明問題，加入checkbox選中事件的處理，當checkbox被選中時，將文字修改為"我被選中了"，相關代碼如下：

//wxml <checkbox-group bindchange="checkboxChange"><checkbox wx:for="{{objectArray}}" value="{{item.id}}" style="display: block;" > {{item.name}} </checkbox> </checkbox-group><button bindtap="addToFront">在上方添加一個新的check組件</button>//js Page({data: {objectArray: [{id: 1, name: '我沒有被選中'},{id: 2, name: '我沒有被選中'},],},addToFront: function(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{id: length + 1, name: '我沒有被選中'}].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray})},checkboxChange: function(e){console.log('checkboxChange')const length = this.data.objectArray.lengthlet checkBoxArray = this.data.objectArrayfor (let i = 0; i < length; i++) {let ischecked = falsefor (let j = 0; j < e.detail.value.length; j++){if (checkBoxArray[i].id == e.detail.value[j]){checkBoxArray[i].name = '我被選中了'ischecked = true}}if (!ischecked){checkBoxArray[i].name = '我沒有被選中'}}this.setData({objectArray: this.data.objectArray})} })

當選中第一個checkbox時，界面如下

這時如果點擊添加組件按鈕會怎樣呢，期望的效果應該如下

然而實際效果確是下圖這樣的

可以看到渲染引擎并沒有將選中的效果和數據綁定起來，導致出現了預期之外的結果。如果想要達到預期效果，就要使用wx:key

<checkbox-group bindchange="checkboxChange"><checkbox wx:for="{{objectArray}}" wx:key = "id" value="{{item.id}}" style="display: block;" > {{item.name}} </checkbox> </checkbox-group><button bindtap="addToFront">在上方添加一個新的check組件</button>

將.wxml文件修改為上述代碼所示，就可以實現預期效果，重點就在 wx:key = "id" 這一句

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態（如 <input/>
中的輸入內容，<switch/> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

wx:key 的值以兩種形式提供
1 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property的值需要是列表中唯一的字符串或數字，且不能動態改變。
2 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要item 本身是一個唯一的字符串或者數字，

上面引用自微信官方教程。除了用于保持視圖組件的狀態外，使用wx:key還有助于提高渲染效率

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。

總結

以上是生活随笔為你收集整理的微信小程序开发教程(基础篇)8-数据绑定下的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。