微信小程序循环数组、对象

微信小程序循环数组与对象示例

数据- >  meals: { breakfast: false, lunch: false, dinner: false, temp: true }

  <view  
        wx:for="{{meals}}"    wx:for-index="key"   wx:for-item="value"  wx:key="key" >
        <text>{{key}}</text>
 </view>

key是属性对应属性(breakfast、lunch、dinner、temp),value对应属性的值(false、true)

下面是数组里面套对象

weekDays: [

{

dayName: '周一',

date: '04.14',

selected: false,

meals: { breakfast: false, lunch: false, dinner: false, temp: false }

},

{

dayName: '周二',

date: '04.15',

selected: false,

meals: { breakfast: false, lunch: false, dinner: false, temp: false }

},

{

dayName: '周三',

date: '04.16',

selected: false,

meals: { breakfast: false, lunch: false, dinner: false, temp: false }

}

],

mealTextMap: {

breakfast: '早餐',

lunch: '午餐',

dinner: '晚餐',

temp: '临时餐'

},

<block wx:for="{{weekDays}}" wx:key="date">
    <view class="day-info">
      <checkbox   class="day-checkbox" 
        bindtap="toggleDay"   data-day="{{index}}"  checked="{{item.selected}}"
     ></checkbox>
        <view>{{item.dayName}}</view>
        <view class="day-date">({{item.date}})</view>
    </view>
    
    <view class="meal-options">
      <view 
        class="meal-option {{value ? 'selected' : ''}}"

        wx:key="key"   bindtap="toggleMeal" 
        wx:for="{{item.meals}}"    wx:for-index="key"   wx:for-item="value" 
        data-index="{{index}}"   data-key="{{key}}"  data-value="{{value}}"
      >
        <text>{{mealTextMap[key]}}</text>
      </view>
    </view>
</block>

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值