wx:if
在框架中,我們用wx:if="{{condition}}"
來判斷是否需要渲染該代碼塊:
<view wx:if="{{condition}}"> True </view>
也可以用wx:elif
和wx:else
來添加一個else塊:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因爲wx:if
是一個控制屬性,需要將它添加到一個標籤上。但是如果我們想一次性判斷多個組件標籤,我們可以使用一個<block/>
標籤將多個組件包裝起來,並在上邊使用wx:if
控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意:<block/>
並不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
wx:if
vshidden
因爲wx:if
之中的模板也可能包含數據綁定,所以當wx:if
的條件值切換時,框架有一個局部渲染的過程,因爲它會確保條件塊在切換時銷燬或重新渲染。
同時wx:if
也是惰性的,如果在初始渲染條件爲false
,框架什麼也不做,在條件第一次變成真的時候纔開始局部渲染。
相比之下,hidden
就簡單的多,組件始終會被渲染,只是簡單的控制顯示與隱藏。
一般來說,wx:if
有更高的切換消耗而hidden
有更高的初始渲染消耗。因此,如果需要頻繁切換的情景下,用hidden
更好,如果在運行時條件不大可能改變則wx:if
較好。
wx:for
在組件上使用 wx:for
控制屬性綁定一個數組,即可使用數組中各項的數據重複渲染該組件。
默認數組的當前項的下標變量名默認爲 index
,數組當前項的變量名默認爲 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item
可以指定數組當前元素的變量名,
使用 wx:for-index
可以指定數組當前下標的變量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for
也可以嵌套,下邊是一個九九乘法表
<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:if
,也可以將 wx:for
用在<block/>
標籤上,以渲染一個包含多節點的結構塊。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
如果列表中項目的位置會動態改變或者有新的項目添加到列表中,並且希望列表中的項目保持自己的特徵和狀態(如 <input/>
中的輸入內容,<switch/>
的選中狀態),需要使用 wx:key
來指定列表中項目的唯一的標識符。
wx:key
的值以兩種形式提供
字符串,代表在 for 循環的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數字,且不能動態改變。
保留關鍵字
*this
代表在 for 循環中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字,如:
當數據改變觸發渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創建,以確保使組件保持自身的狀態,並且提高列表渲染時的效率。
如不提供 wx:key
,會報一個 warning
, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。
示例代碼:
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; ++i) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
}
this.setData({
objectArray: this.data.objectArray
})
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})
注意:
當 wx:for
的值爲字符串時,會將字符串解析成字符串數組
<view wx:for="array">
{{item}}
</view>
等同於
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
注意: 花括號和引號之間如果有空格,將最終被解析成爲字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同於
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>