我們來什麼是條件判斷？
條件判斷， 又叫做流程控制， 主要的作用是用來判斷給定的條件是否滿足了某些表示式， 所有的程式語言中都會有對應的條件判斷語法規則。 所以學習一門語言， 在上面說的基礎資料型別之外， 有多另一個知識點，必須要掌握的， 就是條件判斷。大多數程式語言都使用 if 。。。 else 。。。 來進行條件判斷， 還有部分語言使用 if。。 then 。。。， 還有部分使用的是if 。。。 else 。。。。 end if 。 語言的實現不同， 但是內在機制都是一樣的。 讓我們來看 Vue。js 中如何使用條件判斷， 兩種方式 一種為 v-if ， 另一種是 v-show， 接下來我們詳細說說。
思維導圖
v-if 指令
在 Vue。js 中條件判斷是使用指令 v-if 進行判斷。 這裡因為是一個模板語法， 所以條件判斷就是為了是否渲染頁面內容， 如果判斷條件為真的情況下才把內容渲染到頁面上。 話不多說， 直接看我們的程式碼。
這裡為了演示效果， 特意加了一個計時器， 每三秒改變一下條件的狀態。檢視效果。
因為這裡傳不了動態圖， 就暫時先用這個方式進行展示。
我們這裡使用最簡單的用法， v-if=“放入一個變數或者表示式”， 這裡我們可以用在以下的場景， 只是舉例， 不限制任何方式的使用。 使用者許可權不一致， 看到的內容不一樣， 就可以使用該引數進行判斷。
v-else
如果當某個使用者是管理員，就顯示管理員看到的頁面， 如果不是就不允許檢視， 這個時候， 我們就需要條件判斷的另一個寫法， 叫做 “然後” 或者 就叫做 “或者”。 用來標識例外的情況出現。 這個時候， 我們就可以使用 v-else 指令。需要注意的是 v-else 必須緊跟著 v-if 指令， 否則編譯器將不會識別它。檢視程式碼如下：
開啟瀏覽器， 我們檢視效果。
修改 adminFlag = false 然後再重新整理頁面， 這時將看到頁面中 v-else 生效。 顯示出對應的效果。
v-else-if
當我們需要多個條件判斷的時候， 比方說根據使用者等級顯示對應的內容。 普通使用者只有一個基礎功能，中級使用者可以檢視高階功能， 高階使用者可以檢視所有功能。 這個時候， 我們就可以使用 v-else-if 進行判斷。 具體程式碼如下所示：
當選擇高階的時候， 就可以顯示高階功能的頁面，
我們修改成普通， 就會切換到對應的普通介面。
userLevel=“普通”
修改成中級也是同樣。
userLevel=“中級”
需要注意的是， 這個和 v-else 一樣， 也必須要緊跟著 v-if 或者 v-else-if， 否則也沒有辦法進行渲染對應的頁面，
注意事項
這裡需要注意的是， v-if 和 v-for 不能在同一層級上進行使用， 因為 v-if 的優先順序比 v-for 要高， 所以才使用的時候， v-if 將無法使用 v-for 的變數， 可以在v-for 的內部使用。
v-show
根據表示式的真假值，切換 HTML 元素的 CSS display 狀態， 進行隱藏和顯示元素資訊， 這裡元素不管是否顯示都會載入到頁面上。當切換頻率很高的時候， 推薦使用該方式， 當切換頻率不高的情況下可以選擇該方式， 或者使用 v-if 指令。 演示程式碼如下：
效果如下：
v-show 和 v-if 的區別
從上面的例子中， 我們分析一下，兩個指令的區別和相同點。
相同點
都可以根據表示式進行元素的隱藏和顯示。
不同點
v-if
是控制元素的建立和銷燬。
v-show
是控制 CSS 的 display 屬性。根據上面的例子我們看一下在頁面渲染的時候的區別。這裡使用一個最簡單的案例來描述說明一下，案例程式碼如下：
檢視瀏覽器的渲染程式碼， f12 進入開發者模式， 並找到 Elements 選項， 然後可以看到程式碼：
選中的那一行為 v-if 等於 false 的情況下， 這個時候， 元素並沒有渲染到頁面上， 而是用 <！——v-if——> 佔位符佔位了。 而 v-show 則使用了 style=“display：none；” 進行隱藏了元素。 看到這就可以總結出來另一個經驗出來。 因為 v-show 不管是否顯示都會渲染資料到頁面上元素上， 所以對於不管用不用都顯示和渲染元素情況就特別適用於業務切換頻繁的控制上， 因為 v-if 會有建立和銷燬的過程， 在這個過程中會比 v-show 多了一些額外的處理。但是如果切換不頻繁的情況下 v-if 就更加合適， 因為初始化渲染一樣也有額外的開銷。
最後說一點
現在先對使用有個大概的瞭解， 後續會針對原始碼層進行解讀。關注我， 持續更新中。
