使用 v-if、v-show、v-else 和 v-else-if 在 Vue 中進行條件渲染/顯示

簡介

Vue.js 是一個簡單的 Web 應用程序框架，用於創建動態 Web 界面和單頁應用程序 (SPA) .當我們創建這些應用程序時，我們經常希望根據特定標準渲染某些東西 - 這就是條件渲染的精髓。

條件渲染是指根據條件是否為真來渲染不同的用戶界面 (UI) 標記的能力。此概念經常用於顯示或隱藏組件（切換）、切換應用程序功能、處理身份驗證和授權等上下文中。

v-if

v-if 指令用於有條件地渲染一個塊 表示帶有 v-if 的塊 屬性只會產生 如果指令的表達式返回 true 價值。如果表達式產生無效結果（例如，null , 0 , 空字符串, false )，元素被刪除 來自 DOM。

讓我們通過實際示例來說明這種行為：

<div v-if="login">
    <p>This user has been logged in!... Welcome.</p>
</div>

<script>
export default {
    data() {
        return {
            login: true,
        };
    }
};
</script>

自 login 設置為 true , <div> 包含 v-if 的塊 將產生指令，從而顯示出來。

v-if vs v-show

值得注意的是，v-show 也可以在上面的示例中使用，並且功能看似相同，但兩者之間存在區別。

這意味著當條件切換時，v-if 實際上會使用 v-show 刪除和恢復組件 只是使它們不可見或可見。下面的動畫說明了 v-if 如何 實際刪除和重現代碼塊：

同時，v-show 將始終維護 DOM 中的元素，並且只會更改其 CSS 以切換其外觀（通過設置其 display 到 none ):

v-else

v-else 指令是一個 v-if 允許您自定義 false 的指令 條件渲染中的值。如果不是 true , 你可以使用 v-else 來定義應該發生的事情。

例如，假設我們有一個密碼輸入，我們希望它產生一個錯誤消息，“弱密碼” , 如果輸入的長度小於6或者顯示"Strong Password" 如果長度大於6。

這是一個條件渲染，帶有處理錯誤情況的選項：

<form>
    <input type="password" v-model="password" placeholder="Enter your password" />
    <p v-if="password.length > 6">Strong Password</p>
    <p v-else>Weak Password</p>
</form>

<script>
export default {
    data() {
        return {
            password: ""
        };
    }
};
</script>

注意： v-if /v-else 像普通的 if 一樣工作 和 if...else JavaScript 中的表達式。

讓我們利用它來切換簡單登錄頁面的內容，以便它根據用戶是否登錄來更改消息。我們將根據 userLoggedIn 修改按鈕的措辭 狀態也是：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

<div id="app">
    <div v-if="userLoggedIn">
        <h2>Hello Welcome!</h2>
        <p>You have sucessfully logged in to your user account!</p>
    </div>
    <div v-else>
        <p>Please Log In to access your account!</p>
    </div>
    <button @click="userLoggedIn = !userLoggedIn">
        <p v-if="!userLoggedIn">Login</p>
        <p v-else>LogOut</p>
    </button>
</div>
    
<script>
export default {
    data() {
        return {
            userLoggedIn: false
        };
    }
};
</script>

按鈕的點擊事件將切換 userLoggedIn 數據項，這將影響顯示的數據如下所示：

v-else-if

v-else-if extends a v-if 帶有 else...if 堵塞。這類似於 JavaScript 的 else...if 塊，因為它允許我們將 if 語句添加到現有的 v-if .當有很多條件要檢查並且可以鏈接多次時使用它：

<form>
    <input type="password" v-model="password" placeholder="Enter your password" />
    <p v-if="password.length < 4">Weak Password</p>
    <p v-else-if="password.length < 7">Fairly Strong Password</p>
    <p v-else>Strong Password</p>
</form>

<script>
export default {
    data() {
        return {
            password: ""
        };
    }
};
</script>

注意： 當兩個 v-if 和 v-for 用於相同的元素，v-if 首先被評估。這只是意味著使用 v-if 和 v-for 由於隱含優先級，不建議在同一元素上。

結論

在本文中，我們了解瞭如何使用 v-if 有條件地渲染元素 , v-else , 和 v-else-if .我們還解釋了 v-if 之間的區別 和 v-show .