微信小顺序开辟教程(基本篇)8数据绑定下

教程接上篇，当须要展现一组数据时，能够运用wx:for

//.wxml

{{index}}: {{item.message}}

//.js
age({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})

个中index是当前数据索引的默许变量名，item是当前数据项的默许变量名。
也能够运用 wx:for-item 和 wx:for-index 来指定别号


{{idx}}: {{itemName.message}}


也能够嵌套运用，以下面是一个九九乘法表




{{i}} * {{j}} = {{i * j}}




相似block wx:if，也能够将wx:for用在标签上，以衬着一个包括多节点的构造块


{{index}}:
{{item}}


wx:key

要明白为何须要wx:key，先来看一个例子:

//.wxml
{{item.name}}
在上方增加一个新的check组件
//.js
Page({
data: {
objectArray: [
{id: 1, name: '我没有被选中'},
{id: 2, name: '我没有被选中'},
],
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, name: '我没有被选中'}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
})

上面的代码建立了两个checkbox组件和一个按钮，当点击按钮会在最上方新增一个checkbox组件。
编译代码，会显现以下界面:

点击按钮，界面以下：

ok，到这里一切正常 ，为了更好的申明题目，到场checkbox选中事宜的处置惩罚，当checkbox被选中时，将笔墨修改成&＃8221;我被选中了&＃8221;，相干代码以下：

//wxml

{{item.name}}


在上方增加一个新的check组件
//js
Page({
data: {
objectArray: [
{id: 1, name: '我没有被选中'},
{id: 2, name: '我没有被选中'},
],
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.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.length
let checkBoxArray = this.data.objectArray
for (let i = 0; i let ischecked = false
for (let j = 0; 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


{{item.name}}


在上方增加一个新的check组件

将.wxml文件修改成上述代码所示，就能够完成预期效果，重点就在 wx:key = "id" 这一句

假如列表中项目的位置会动态转变或许有新的项目增加到列表中，而且愿望列表中的项目坚持本身的特性和状况（如
中的输入内容， 的选中状况），须要运用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种情势供应
1 字符串，代表在 for 轮回的 array 中 item 的某个 property，该 property的值须如果列表中唯一的字符串或数字，且不能动态转变。
2 保存关键字 *this 代表在 for 轮回中的 item 本身，这类示意须要item 本身是一个唯一的字符串或许数字，

上面援用自微信官方教程。除了用于坚持视图组件的状况外，运用wx:key另有助于进步衬着效力

当数据转变触发衬着层从新衬着的时刻，会校订带有 key的组件，框架会确保他们被从新排序，而不是从新建立，以确保使组件坚持本身的状况，而且进步列表衬着时的效力。