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

2021-09-23 15:21:21 字數 1217 閱讀 1027

文件:

在框架中,使用 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 的元件,框架會確保他們被重新排序,而不是重新建立,以確保使元件保持自身的狀態,並且提高列表渲染時的效率。

} }

React學習 條件渲染 列表渲染 表單渲染

如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head div body src crossorigin script src crossorigin...

vue學習 條件渲染

v if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 truthy 值的時候被渲染。也可以用v else新增乙個 else 塊 因為v if是乙個指令,所以必須將它新增到乙個元素上。但是如果想切換多個元素呢?此時可以把乙個元素當做不可見的包裹元素,並在上面使用v if。最終的渲染結果...

微信小程式 條件渲染 列表渲染

wx if表示判斷單個元件 block wx if表示判斷塊,也即判斷多個元件 true view 如果condition為真,則顯示 true 否則不顯示 使用wx elif和wx else來新增乙個else if 和else塊 大於5 view 大於2 view else 小於等於2 view ...