微信小程序 wx:key 高级列表循环

让我们先看看代码

.wxml 代码

<block  wx:for="{{items}}" >
   <label > <checkbox  />{{item.title}} </label >
</block >
<button  bindtap="chng" >变更项 </button >

.js 代码

   data: {
    items: [
{
   id: 1,
   title:  "a"
},
{
   id: 2,
   title:  "b",
},
{
   id: 3,
   title:  "c",
}
]
},


  chng:  function(e){
     this.setData({
      items: [
{
   id: 2,
   title:  "b"
},
{
   id: 1,
   title:  "a",
},
{
   id: 3,
   title:  "c",
}
]
  })
}

效果如下：

点击按钮“变更项”前，我们选中第二项，即 b 那一项。效果如下：

点击按钮“变更项”后，我们改变了 items 项的顺序。效果如下：

虽然字母顺序变了，但是选择项没有变。

如果我们希望用户输入也跟随，则使用 wx:key

wx:key 指定 items 中一个具有唯一值的属性，比如我们这里的 id，

将 <block wx:for="{{items}}"> 改为 <block wx:for="{{items}}" wx:key="id">，注意：是 wx:key="id"，不是 wx:key="{{id}}"。

此时，点击按钮“变更项”后，我们改变了 items 项的顺序。效果如下：

以上只是改变顺序，如果是改变 items 元素个数，道理一样的。

再细化一下，如果我们对 checkbox 使用了 checked="{{checked}}"，而 setData 赋新值时为数组元素设置了：{ id:2, checked:false, title:"b" }, 而在点按钮之前又选中了 b，点按钮后，是继续选中 b，还是听新值的呢？听新值的。

那新值不要 checked 属性，是不是就继续选中 b 呢？也不是，因为没有赋值，对 {{checked}} 来说，相当于 false（boolean 默认值是 false）。