微信小程序中的 wx:for、wx:for-item、wx:for-items、wx:for-index

• wx:for 和 wx:for-items 在经过多次试验之后发现作用一样，都是用来遍历数组的

【js】

Page({
  data: {
    values: [
      { name: "1", value: '北京', checked: false },
      { name: "2", value: '上海', checked: false },
      { name: "3", value: '深圳', checked: false },
      { name: "4", value: '广州', checked: true },
      { name: "5", value: '江苏', checked: false }
    ]
  },checkboxChange(e){
    console.log(e);
});

【wxml】

<checkbox-group bindchange='checkboxChange'>
  <label wx:for-items='{{values}}'>
    <checkbox value='{{item.name}}' checked='{{item.checked}}'>{{item.value}}</checkbox>
  </label>
</checkbox-group>

<checkbox-group bindchange='checkboxChange'>
  <label wx:for='{{values}}'>
    <checkbox value='{{item.name}}' checked='{{item.checked}}'>{{item.value}}</checkbox>
  </label>
</checkbox-group>

以上两种方式效果一样都是遍历数组中的元素放到复选框中，并且给复选框初始值，wx:for 或者 wx:for-items 的值是要遍历的数组。

• wx:for-item 该属性表示循环时元素的别名

细心的小伙伴都发现了，这里用的是 item 去调用属性，其实 wx:for-item 不写，默认是 item，wx:for-item 有值则以它现有的值为准

【wxml】

<checkbox-group bindchange='checkboxChange'>
  <label wx:for-items='{{values}}' wx:for-item="val">
    <checkbox value='{{val.name}}' checked='{{val.checked}}'>{{val.value}}</checkbox>
  </label>
</checkbox-group>

看上面这段代码之后，就清除了 wx:for-item 的作用了吧！

• wx:for-index 该属性表示的是循环的下标（从 0 开始），默认是 index，和 wx:for-item 一样，如果 wx:for-index 有值则以它现在的值为准

【wxml】

<checkbox-group bindchange='checkboxChange'>
  <label wx:for-items='{{values}}' wx:for-item="val">
    <checkbox value='{{val.name}}' checked='{{val.checked}}'>{{val.value}}--{{index}}</checkbox>
  </label>
</checkbox-group>

<checkbox-group bindchange='checkboxChange'>
  <label wx:for-items='{{values}}' wx:for-item="val" wx:for-index='i'>
    <checkbox value='{{val.name}}' checked='{{val.checked}}'>{{val.value}}--{{i}}</checkbox>
  </label>
</checkbox-group>

以上两种结果一样，如下图！！

自己理解，还请大神多多提出意见！！ ^_^