在Vue中，有兩種方法可以有條件地渲染部分應用程式：v-if和v-show。

你可能會問，“為什麼我們需要兩種方法？”

問得好，這也是我在學習Vue時遇到的一個問題。我的答案是，儘管這些指令有著相似的最終結果，但它們有條件地顯示內容的方式是不同的。

在本教程中，我們將瞭解什麼是條件渲染、v-if和v-show的工作原理以及何時使用它們。

好的，話不多說，直接進入主題吧。

什麼是條件渲染？

條件渲染是控制是否渲染模板程式碼的能力。我們可以通過應用程式的當前狀態來做到這一點。

來看一個例子。假設我們正在建立一個表單，並且希望如果密碼少於6個字元，則顯示無效輸入的錯誤訊息。

現在讓我們在模板中建立一個帶有輸入的基本表單區域。指令碼使用v-model

基本表單

<template>
  <div>
    <h2>Sign Up</h2>
    {{ email }} {{ password }}
    <p><input type="text" placeholder="Email" v-model="email" /></p>
    <p><input type="password" placeholder="Password" v-model="password" /></p>
  </div>
 

</template>

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

　　接著，讓我們在密碼欄位下新增一個帶有error-message類的<p>元素。

<template>
  <div>
    <h2>Sign Up</h2>
    {{ email }} {{ password }}
    
 
<p><input type="text" placeholder="Email" v-model="email" /></p>
    <p><input type="password" placeholder="Password" v-model="password" /></p>
    <p class="error-message">The password must be at least 6 characters</p>
  </div>
</template>

那麼，v-if和v-show有什麼區別？

關鍵區別在於v-if有條件地渲染元素，而v-show有條件地顯示元素。

這意味著當條件切換時，v-if實際上將銷燬並重新建立元素。而v-show則始終保留元素在DOM中，並且只會通過更改CSS來切換顯示。

什麼時候使用？

一般情況下，考慮效能，v-if具有更高的切換成本，而v-show具有更高的初始渲染成本。

所以，如果你需要頻繁切換某些內容，建議使用v-show。

如果條件在執行時變化不那麼頻繁，建議使用v-if。

另一件要考慮的事情是，v-if允許我們結合使用其他邏輯塊。具體地說就是，我們可以使用v-else和v-else-if塊在app中真正構建高階邏輯。