微信小程序列表/对象渲染

页面初始数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg:"hello mina",
    num:100000,
    isMan:false,
    person: {
      age:70,
      height:200,
      name:"富婆"
    },
    isChecked:false,
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      }
    ]
  }
})

1.列表渲染

<!--
    1.列表循环
        1 wx:for="{{数组或者对象}}" wx:for-item="循环项的名称" wx:for-index="循环项的索引"
        2.wx:key="唯一的值" 用来提高列表渲染的性能
            1.wx:key 绑定一个普通的字符串的时候，那么这字符串名称肯定是循环数组中的对象的唯一属性
            2.wx:key ="*this" 就表示 你的数组 是一个普通数组  *this表示是循环项
            [1,2,3,4,5]
            ["1","2","abc"]
        3.当出现数组的嵌套循环的时候，尤其要注意 以下的绑定的名称，不要重名
            wx:for-item="item"  wx:for-index="index"
        4.默认情况下 我们不写
            wx:for-item="item" wx:for-index="index"(默认)
            只有一层循环的时候可以省略        
  -->
<view>
   <view
    wx:for="{{list}}" 
    wx:for-item="item" 
    wx:for-index="index"
    wx:key="id"
    >
    索引:{{index}}
    --
    值:{{item.name}}
   </view>
</view>

**

2.对象渲染

**

<!-- 
    2.对象循环
        1.wx:for="{{对象}}"  wx:for-item="对象的值" wx:for-index="对象的属性"
        2.循环对象的时候，最好把item和index的名称都修改一下
            wx:for-item="value" wx:for-index="key"
-->
<view>
    <view>对象循环</view>
    <view 
    wx:for="{{person}}" 
    wx:for-item="value" 
    wx:for-index="key"
    wx:key="age"
    >
    属性:{{key}}
    --
    值:{{value}}
    </view>
</view>