條件渲染
wx:if
在小程序中,使用 wx:if="{{condition}}" 來判斷是否需要渲染某個代碼塊,通過 wx:elif="{{condition}}" 和 wx:else 作補(bǔ)充判斷。
block標(biāo)簽
- 什么是 block
block標(biāo)簽是一個容器,用來包裹多個組件,不會被渲染到界面上 - 結(jié)合 <block> 標(biāo)簽使用 wx:if
如果需要一次性控制多個組件的展示與隱藏,可以使用<block></block>標(biāo)簽將多個組件包裹起來,并在<block>標(biāo)簽上使用wx:if來控制顯示
hidden
在小程序中,也可以使用 hidden="{{condition}}" 控制元素的顯示與隱藏。
wx:if 和 hidden 的區(qū)別
- 運(yùn)行方式不同
-
wx:if以動態(tài)創(chuàng)建和移除元素的方式,控制元素的顯示與隱藏 -
hidden以切換樣式(display)的方式來控制元素的顯示與隱藏
2.使用建議 - 當(dāng)需要頻繁切換元素的顯示與隱藏,建議使用 hidden。如果使用 wx:if 頻繁的創(chuàng)建和移除元素,對小程序性能的影響比較大
- 當(dāng)控制條件復(fù)雜時,建議使用 wx:if 搭配 wx:elif 和 wx:else 來控制元素的顯示和隱藏
列表渲染
wx:for
通過 wx:for 可以根據(jù)指定的數(shù)組,循環(huán)渲染重復(fù)的組件結(jié)構(gòu),代碼結(jié)構(gòu)如下
<view wx:for="{{array}}">
第{{index}}條數(shù)據(jù)的值是{{item}}
</view>
其中,index 代表當(dāng)前索引,item 是索引在數(shù)組中對應(yīng)的值
wx:key
小程序在實現(xiàn)列表渲染時,可以通過 wx:key 來提高渲染效率
<view wx:for="{{array}}" wx:key="index">
第{{index}}條數(shù)據(jù)的值是{{item}}
</view>
其中,wx:key 賦值不用 Mastache 語法,可以用數(shù)組中的元素(如 id),也可以用 index 索引當(dāng)作 key 值