微信小程序开发笔记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>