微信小程序 --wx:for循環 --條件渲染：wx:if 、hidden

一、 wx：for 循環

1. 循環數組：

　　1. 一般數組：[1, 2, 3, 4, 5, 'a', 'm']

　　2. 包含對象的數組：[ { key: value, ... }, { key: value, ...}]

　　注： 一般數組中可以使用wx:key=‘*this’， 復雜數組使用wx:key=‘對象中唯一的屬性’

　　test = [{data: data1, id: 1}, {data: data2, id: 2},{data: data3, id: 3},]

　　list = [1, 2, 3, 4, 5, 'a', 'm']

<view>
  <view wx:for="{{test}}" wx:for-item='item' wx:for-index="index" wx:key='id'>
    {{item.name}}
    --
    {{item.age}}
  </view>

  <view wx:for="{{list}}" wx:for-item='item' wx:for-index="index" wx:key='*this'>
    {{item}}
  </view>
</view>

2. 循環對象：

　　對象數據：{key: value, ...}

　　注：wx:key等於一個對象中的屬性，且該屬性唯一即可

<!-- 對象循環 -->
<view>
  <view wx:for="{{shopping}}" wx:for-item='value' wx:for-index="key" wx:key='food'>
    {{key}}
    --
    {{value}}
  </view>
</view>

補充小知識：

　　block標簽：占位標簽，編寫時使用block，在頁面渲染時，block標簽會自動被小程序移除，只保留其內部內容

<!-- block標簽 -->
<view>
  <block wx:for="{{test}}" wx:key='id'>
    {{item.name}}
    ---
    {{item.age}}
  </block>
</view>

 

二、條件渲染：wx：if 、hidden

<!-- 1. 條件渲染-- wx:if 
  注：此條件渲染是將標簽移除、創建來切換顯示的。不適用需要反復切換的場景
-->
<view>
    <!-- 通過條件判斷，來顯示或隱藏標簽 -->
    <view wx:if="{{data === 0}}">if: {{data}}</view>
    <view wx:elif="{{data === 1}}">elif: {{data}}</view>
    <view wx:else>else: {{data}}</view>
</view>

<!-- 2. 條件渲染：hidden 
  注：此屬性是修改樣式來切換顯示, display:none。
  注2：設置了hidden屬性，就不能再去設置css中display屬性，有沖突
-->
<view>
    <!-- 直接在標簽屬性中添加hidden隱藏 -->
    <view hidden>hidden1</view>
    <!-- 在標簽屬性中使用hidden並賦值，判斷boolear來隱藏或顯示 -->
    <view hidden="{{false}}">hidden2</view>
</view>