微信小程序開發筆記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>