文章目錄
一、條件渲染
wx:if
- 在小程序中，使用
wx:if="{{condition}}"來判斷是否需要渲染該代碼塊 - 也可以用
wx:elif和wx:else來添加一個 else 塊
<view wx:if="{{flag > 10}}">hh</view>
<view wx:elif="{{flag == 10}}">xx</view>
<view wx:else>gg</view>
block wx:if
- 因爲
wx:if是一個控制屬性，需要將它添加到一個標籤上。 - 如果要一次性判斷多個組件標籤，可以使用一個
<block></block>標籤將多個組件包裝起來，並在上邊使用wx:if控制屬性。 <block/>並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
<block wx:if='{{ flag == 10 }}'>
<view>JavaScript</view>
<view>HTML</view>
<view>CSS</view>
</block>
hidden
- 使用
hidden="{{condition}}"也能控制元素的顯示與隱藏
<view hidden="{{ flag == 10}}">hidden</view>
爲true隱藏，爲false 顯示
hidden 和 wx:if 的區別
- 被
wx:if控制的區域，框架有一個局部渲染的過程，會根據控制條件的改變，動態創建或銷燬對應的UI結構。類似Vue中的v-if wx:if是惰性的，如果在初始渲染條件爲 false，框架什麼也不做，在條件第一次變成真的時候纔開始局部渲染。- 相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。類似
Vue中的v-show - 總結：
wx:if有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則wx:if較好。
二、列表渲染
wx:for
- 在組件上使用
wx:for控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。 - 默認數組的當前項的下標變量名默認爲
index，數組當前項的變量名默認爲item。
<view wx:for='{{ arr }}' wx:key='index'>
我是{{ item }} -- 索引是 {{ index }}
</view>
block wx:for
wx:for可以用在<block></block>標籤上，以渲染一個包含多節點的結構塊。
<block wx:for='{{ arr }}' wx:key='index'>
<view>值：{{item}}</view>
<view>索引:{{index}}</view>
</block>
指定索引和當前項的變量名
- 使用
wx:for-item可以指定數組當前元素的變量名 - 使用
wx:for-index可以指定數組當前下標的變量名
<view wx:for='{{ arr }}' wx:for-item='foritem' wx:for-index='forindex' wx:key='index'>
我是{{ foritem }} -- 索引是 {{ forindex }}
</view>
列表渲染中的 wx:key
1. wx:key 的作用說明
-
如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特徵和狀態（如
<input/>中的輸入內容，<checkbox/>的選中狀態），需要使用wx:key來指定列表中項目的唯一的標識符。 -
當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。
2. wx:key 的注意事項
key值必須具有唯一性，且不能動態改變key的值必須是數字或字符串- 保留關鍵字
*this代表在for循環中的item本身，它也可以充當key值，但是有以下限制：需要item本身是一個唯一的字符串或者數字。 - 如不提供
wx:key，會報一個warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。