小程序循环

小程序for循环

wxml    （没有 wx:key="index"  会有警告）

<!-- 写法一 -->
<view wx:for="{{arr}}" wx:key="index">{{item}} -- {{index}}</view>
<!-- 写法二 -->
<view wx:for="{{arr}}" wx:key="index" wx:for-item="v" wx:for-index="y">{{v}}----------{{y}}</view>
<!-- 写法三 -->
<view wx:for="{{[7,8,9]}}" wx:key="index">{{item}}</view>
<!-- index为循环的数组的下标 -->


<view wx:for="{{book}}" wx:key="index">{{item.bookName}}->{{item.ren}}</view>

 

 

js

  data: {
    arr:[1,2,3,4,5,6],
    book:[
      {
        bookName:"聊斋",
        ren:"蒲松龄"
      },{
        bookName:"红楼梦",
        ren:"曹雪芹"
      }
    ]
  },

 

 

 双层for循环

js

  data: {
    book:[
      [
        {
          bookName: "聊斋",
          ren: "蒲松龄"
        }, {
          bookName: "红楼梦",
          ren: "曹雪芹"
        }
      ],
      [
        {
          bookName:"三国演义",
          ren:"罗贯中"
        },
        {
          bookName:"水浒传",
          ren:"施耐庵"
        }
      ],
      [
        {
          bookName:"西游记",
          ren:"吴承恩"
        },
        {
          bookName:"莽荒纪",
          ren:"我吃西红柿"
        }
      ]
    ]
  },

wxml   （没有 wx:key="index"  会有警告）

<view wx:for="{{book}}" wx:key="index">
<view wx:for="{{item}}" wx:for-item="c" wx:key="index">
  <!-- 另外一种写法 <view wx:for="{{book[index]}}" wx:for-item="c" wx:key="index"> -->
    <view>{{c.bookName}} -> {{c.ren}} </view>
  </view>
</view>

 

多层for循环类似于双层for循环