微信小程序前端怎么进行嵌套循环,并进行内外层值的比较

外层循环中使用 wx:for 进行列表渲染,可以使用 wx:for-index 绑定索引值,例如: wx:for-index="dataListindex"
内层循环中设置一个 wx:for-item 属性,例如: wx:for-item="cell",这样可以将内层循环的每一个数据项重新命名为 cell
内部循环中,使用 {{cell.属性}} 可以访问 cell 对象的属性,例如: {{cell.name}}

如下例子,其中外层循环使用 wx:for="{{arrange_time}}" 进行列表渲染,内层循环使用 wx:for="{{list_sheduled}}" wx:for-item="cell" 进行列表渲染,然后就可以使用 {{cell.属性}} 访问内层循环的数据项了。

<!-- 外层循环,对arrange_time进行循环,如下放注解展示,相当于要执行两次循环 -->
<view class="itemBox" wx:for="{{arrange_time}}" wx:for-index="dataListindex" wx:key="index">
    <!-- 展示外层循环的数据 -->
    <view class="timeBox">{{item}}</view>
    <!-- 进行内层循环 -->
    <view wx:for="{{list_sheduled}}" wx:for-item="cell" wx:key="index">
        <!-- 进行判断:如果外层的item与内层的arrange_time相同,就输出内层的id -->
        <view class="timeBox" wx:if="{{item==cell.arrange_time}}">{{cell.id}}</view>
    </view>
</view>

注解:

arrange_time是个一维数组,在引用时直接可以使用item,不需要.属性

list_sheduled是个数组对象,引用数据需要.属性,这里由于使用了wx:for-item="cell",则内层循环在引用数据的时候,需要使用cell而不是item,例如cell.arrange_time,cell.main_status等

效果:

方法2:

  • 例子来源于 developers.weixin.qq.com,其中第一重循环中使用 wx:for-index="cat_idx" 绑定索引值,第二层循环中使用 wx:if="{{post.cid == categoriesList[cat_idx].id}}" 判断条件:

<block wx:for="{{categoriesList}}" wx:key="{{index}}" wx:for-index="cat_idx">
  <view class="category-title">{{item.cat}}</view>
  <view class="post-list">
    <block wx:for="{{postList}}" wx:key="{{index}}" wx:if="{{post.cid == categoriesList[cat_idx].id}}">
      <view class="post-item">
        <view class="post-title">{{post.title}}</view>
        <view class="post-desc">{{post.desc}}</view>
      </view>
    </block>
  </view>
</block>
可以通过使用 wx:for-item {{cell.属性}} 访问内层循环的数据项,或者使用 wx:if 判断条件,实现微信小程序前端嵌套循环值的比较。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值