微信小程序开发笔记5，条件渲染

  <!-- 条件渲染 --> <!-- 根据绑定的表达式的逻辑值来判断是否渲染组件 --> <!-- 控制属性进行分支渲染 --> <view wx:if="{{condition}}">True</view> <view wx:if="{{length > 5}}">1</view> <view wx:elif="{{length > 2}}">2</view> <view wx:else>3</view>

<!-- 当需要一个表达式控制多个组件时 --> <!-- block不是组件，只是一个包装元素 --> <block wx:if="{{condition}}"> <view>view1</view> <view>view2</view> </block>
<!-- 列表渲染 --> <!-- 控制属性，进行循环渲染 --> <!-- 该属性默认当前下标变量名时index，默认当前元素变量名为item --> <view wx:for="{{users}}"> <text> <text>列表循环</text> {{index}}-{{item.name}}-{{item.age}} </text> </view>

<!-- 重命名下标和变量名 --> <view wx:for="{{users}}" wx:for-index="idx" wx:for-item="user"> <text> <text>重命名下标和变量名</text> {{idx}}-{{user.name}}-{{user.age}} </text> </view>


<!-- 嵌套打印九九乘法 --> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{ i * j }} </view> </view> </view>

<!-- block wx：for包装 --> <block wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"> <block wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{ i * j }} </view> </block> </block>

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄