微信小程序——條件渲染和列表渲染

條件渲染

wx:if

在小程序中,使用 wx:if="{{condition}}" 來判斷是否需要渲染某個代碼塊,通過 wx:elif="{{condition}}"wx:else 作補(bǔ)充判斷。

block標(biāo)簽
  1. 什么是 block
    block 標(biāo)簽是一個容器,用來包裹多個組件,不會被渲染到界面上
  2. 結(jié)合 <block> 標(biāo)簽使用 wx:if
    如果需要一次性控制多個組件的展示與隱藏,可以使用 <block></block> 標(biāo)簽將多個組件包裹起來,并在 <block> 標(biāo)簽上使用 wx:if 來控制顯示
hidden

在小程序中,也可以使用 hidden="{{condition}}" 控制元素的顯示與隱藏。

wx:if 和 hidden 的區(qū)別
  1. 運(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容