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

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

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

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

---

前言

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

---

一、條件渲染

??前面已經(jīng)介紹完了WXML模板語法–事件綁定，通過栗子學(xué)習(xí)到了如何在WXML頁面上進(jìn)行事件綁定。接下來就來講解一下另外一個模板語法–條件渲染。話不多說，讓我們原文再續(xù)，書接上回吧。

1、wx:if

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

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

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

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

?? 當(dāng)改變type屬性時，頁面顯示的文本也是隨著改變?？梢詠砜匆幌聦嶋H效果：

2、 <block> 使用 wx:if

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

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

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

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

3、hidden

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

cshPageTab.js：

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

cshPageTab.wxml：

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

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

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

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

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

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

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

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

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

---

總結(jié)

??感謝觀看，這里就是常用的視圖容器類組件的介紹使用，如果覺得有幫助，請給文章點個贊吧，讓更多的人看到。🌹 🌹 🌹

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

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

更多專欄訂閱:

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

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