小程式學習條件渲染和列表渲染

文件：

在框架中，使用 wx:if="}" 來判斷是否需要渲染該**塊：

true

也可以用 wx:elif 和 wx:else 來新增乙個 else 塊：

5}}">1
2}}">2
3

因為 wx:if 是乙個控制屬性，需要將它新增到乙個標籤上。如果要一次性判斷多個元件標籤，可以使用乙個 block標籤將多個元件包裝起來，並在上邊使用 wx:if 控制屬性。

view1 view2

注意： block 並不是乙個元件，它僅僅是乙個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

在元件上使用 wx:for 控制屬性繫結乙個陣列，即可使用陣列中各項的資料重複渲染該元件。

預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item

}: }

使用 wx:for-item 可以指定陣列當前元素的變數名，

使用 wx:for-index 可以指定陣列當前下標的變數名：


}: }

類似 block wx:if，也可以將 wx:for 用在標籤上，以渲染乙個包含多節點的結構塊。例如：

}:}

如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 input中的輸入內容，switch的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。

wx:key 的值以兩種形式提供：

1、字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。例如item下有個屬性id，則直接寫wx:key="id"就行。

2、保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是乙個唯一的字串或者數字。

當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。


}  }

小程式學習 條件渲染和列表渲染