• 💌 所屬專欄：【微信小程序開(kāi)發(fā)教程】

• 😀 作??者：我是夜闌的狗🐶

• 🚀 個(gè)人簡(jiǎn)介：一個(gè)正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實(shí)戰(zhàn)分享 ，歡迎咨詢！

• 💖 歡迎大家：這里是CSDN，我總結(jié)知識(shí)的地方，喜歡的話請(qǐng)三連，有問(wèn)題請(qǐng)私信 😘 😘 😘

---

前言

??大家好，又見(jiàn)面了，我是夜闌的狗🐶，本文是專欄【微信小程序開(kāi)發(fā)教程】專欄的第11篇文章;
??今天開(kāi)始學(xué)習(xí)微信小程序的第七天💖💖💖，開(kāi)啟新的征程，記錄最美好的時(shí)刻🎉，每天進(jìn)步一點(diǎn)點(diǎn)。
??專欄地址：【微信小程序開(kāi)發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開(kāi)發(fā)過(guò)程的總結(jié)，希望能夠加深自己的印象，以及幫助到其他的小伙伴😉😉。
??如果文章有什么需要改進(jìn)的地方還請(qǐng)大佬不吝賜教👏👏。

---

一、條件渲染

??前面已經(jīng)介紹完了WXML模板語(yǔ)法–事件綁定，通過(guò)栗子學(xué)習(xí)到了如何在WXML頁(yè)面上進(jìn)行事件綁定。接下來(lái)就來(lái)講解一下另外一個(gè)模板語(yǔ)法–條件渲染。話不多說(shuō)，讓我們?cè)脑倮m(xù)，書接上回吧。

1、wx:if

??在小程序中，使用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊，如果里面的 condition 為 true的時(shí)候就會(huì)顯示 view 組件，反之則不顯示，示例代碼如下所示：

<view wx:if="{{condition}}"> 我是夜闌的狗 </view>

??這里看到 if 語(yǔ)句肯定會(huì)聯(lián)想到 else 和 elif，同樣這里也是有 wx:else 和 wx:elif ，可以用來(lái)添加 else 判斷：

<view wx:if="{{type === 1}}"> 夜蘭 </view>
<view wx:elif="{{type === 2}}"> 高啟強(qiáng) </view>
<view wx:else> 老默不想吃魚 </view>

?? 當(dāng)改變type屬性時(shí)，頁(yè)面顯示的文本也是隨著改變?？梢詠?lái)看一下實(shí)際效果：

2、 <block> 使用 wx:if

??如果想要控制多個(gè)組件一起展示和隱藏的話，就可以使用一個(gè) <block></block> 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在
標(biāo)簽上使用 wx:if 控制屬性，具體代碼如下：

Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {// 字符串類型的數(shù)據(jù)info: 'Nice 十連雙黃',},
})

??注意： 并不是一個(gè)組件，它只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁(yè)面中做任何渲染，所以只會(huì)顯示該組件內(nèi)部的組件。

??看到這里，估計(jì)有疑惑了，好像這種操作在兩個(gè) view 組件外面再加一個(gè) view + wx:if 不也是可行的嗎？確實(shí)是可行，但是實(shí)際運(yùn)行過(guò)程中，最外部的 view 組件也會(huì)被一起渲染出來(lái)，而使用 組件不會(huì)被渲染，只起到一個(gè)包裹的作用，所以使用 組件可以避免渲染不必要的元素，以此來(lái)提高頁(yè)面渲染性能。

3、hidden

??在小程序中，除了使用 wx:if 來(lái)控制元素的顯示與隱藏外，還可以直接使用 hidden="{{ condition }}" 完成此操作。

cshPageTab.js：

Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {flag: true,},})

cshPageTab.wxml：

<block wx:if="{{true}}"><view hidden="{{flag}}">狂飆</view><view>我也要去賣魚了</view>
</block>

?? 當(dāng)條件為 true 時(shí)隱藏元素，條件為 false 時(shí)則顯示，來(lái)看一下實(shí)際效果：

4、wx:if 與 hidden 的區(qū)別

?? 前面介紹了 wx:if 和 hidden 這兩種隱藏顯示元素的方法，雖然這種方法實(shí)現(xiàn)功能是相似的，但本質(zhì)上還是有區(qū)別的，如下表格所示：

屬性	wx:if	hidden
運(yùn)行方式	wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素 的方式控制元素的展示與隱藏	hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏
使用建議	控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配 wx:elif、wx:else 進(jìn)行展示與隱藏的切換	頻繁切換時(shí)，建議使用 hidden

??因?yàn)?wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當(dāng) wx:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過(guò)程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。
??同時(shí) wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開(kāi)始局部渲染。相比之下，hidden 就簡(jiǎn)單的多，組件始終會(huì)被渲染，只是簡(jiǎn)單的控制顯示與隱藏。
??這里通過(guò)下面的栗子來(lái)學(xué)習(xí)一下兩者的不同，具體代碼如下：
cshPageTab.wxml：

<block wx:if="{{true}}"><view hidden="{{flag}}">狂飆</view><view>我也要去賣魚了</view>
</block>

??這兩者的運(yùn)行原理是不同的，想要一起顯示出來(lái) hidden 屬性 flag 就要取反置為 false才可以顯示，實(shí)現(xiàn)效果如下所示：

??一般來(lái)說(shuō)，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

---

總結(jié)

??感謝觀看，這里就是常用的視圖容器類組件的介紹使用，如果覺(jué)得有幫助，請(qǐng)給文章點(diǎn)個(gè)贊吧，讓更多的人看到。🌹 🌹 🌹

??也歡迎你，關(guān)注我。👍 👍 👍

??原創(chuàng)不易，還希望各位大佬支持一下，你們的點(diǎn)贊、收藏和留言對(duì)我真的很重要！！！💕 💕 💕 最后，本文仍有許多不足之處，歡迎各位認(rèn)真讀完文章的小伙伴們隨時(shí)私信交流、批評(píng)指正！下期再見(jiàn)。🎉

更多專欄訂閱:

• 😀 【LeetCode題解（持續(xù)更新中）】
• 🚝 【Java Web項(xiàng)目構(gòu)建過(guò)程】
• 💛 【微信小程序開(kāi)發(fā)教程】
• ? 【JavaScript隨手筆記】
• 🤩 【大數(shù)據(jù)學(xué)習(xí)筆記（華為云）】
• 🦄 【程序錯(cuò)誤解決方法（建議收藏）】
• 🚀 【軟件安裝教程】

訂閱更多，你們將會(huì)看到更多的優(yōu)質(zhì)內(nèi)容！！