微信小程序 條件渲染詳解
1，wx.if
在微信小程序中，小程序是使用wx.if="{{條件}}"來判斷是否渲染該代碼塊，用法如下：
<view wx.if="{{條件}}">True</view>
也可以用wx.elif和wx.else來添加一個(gè)else塊，事例如下：
<view wx:if="{{a>1}}"> 1 </view>
<view wx:elif="{{a>2}}"> 2 </view>
<view wx:else> 3 </view>
2，block wx:if
wx:if是一個(gè)控制屬性，需要將它添加到標(biāo)簽上，但是如果我們想要一次性判斷多個(gè)標(biāo)簽，我用可以使用<block/>將多個(gè)組件包裝起來，并在上邊使用wx:if控制屬性，
其中并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會在頁面中做任何渲染，只接受控制屬性。事例如下：
<block wx:if="{{TURE}}">
<view>view1</view>
<view>view2</view>
</block>
注：一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用hidden更好，如果在運(yùn)行時(shí)條件不大可能改變則wx:if較好。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
JavaScript?ES6語法中l(wèi)et,const?,var?的區(qū)別
這篇文章主要為大家介紹了JavaScript中l(wèi)et,const?,var?的區(qū)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要給大家分享JS創(chuàng)建對象的四種方式，分別是字面量的方式去創(chuàng)建對象、使用new字符創(chuàng)建對象、自定義構(gòu)造函數(shù)、工廠模式創(chuàng)建對象，更多詳細(xì)內(nèi)容，請參考下面文章的具體內(nèi)容2021-11-11
Javascript實(shí)現(xiàn)的分頁函數(shù)
Javascript實(shí)現(xiàn)的分頁函數(shù)...2006-12-12
這篇文章主要介紹了微信小程序 開發(fā)MAP（地圖）實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
js前端實(shí)現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽
這篇文章主要為大家介紹了js前端實(shí)現(xiàn)word?excel?pdf?ppt?mp4圖片文本等文件預(yù)覽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
實(shí)踐示例理解js強(qiáng)緩存協(xié)商緩存
這篇文章主要為大家以實(shí)踐示例理解js強(qiáng)緩存協(xié)商緩存，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了解決React中的re-render問題,相信很多人都遇到過。接下來給大家具體講講這個(gè)問題,需要的朋友可以參考y一下，洗碗給對你有所幫助2022-01-01
微信小程序 POST請求（網(wǎng)絡(luò)請求）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 POST請求（網(wǎng)絡(luò)請求）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了微信小程序 WXSS的相關(guān)資料,并附簡單實(shí)例代碼，需要的朋友可以參考下2016-10-10
JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02