Vue v-if v-else詳解

一、v-if 和 v-else的基本使用

Vue中的v-if和v-else是用於條件性渲染的指令，只有當指定條件為 true 時才會渲染對應的DOM元素。下面的代碼演示了v-if和v-else的基本用法：

<template>
  <div v-if="isShow">
    <h3>這是v-if渲染出來的內容</h3>
  </div>
  <div v-else>
    <h3>這是v-else渲染出來的內容</h3>
  </div>
</template>


export default {
  data() {
    return {
      isShow: false,
    };
  },
};
</script>

上面的代碼中，通過isShow的值來判斷是渲染v-if還是v-else指定的內容。當isShow為true時，渲染v-if指定的內容；當isShow為false時，渲染v-else指定的內容。需要注意的是：v-else必須緊跟在v-if後面，否則會報錯。

二、v-if和v-show的區別

雖然v-if和v-show都是用於條件性渲染的指令，但是它們之間存在一些區別。下面是它們之間的區別：

1. 編譯時機

v-if 是「真正的」條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if是惰性的，如果初始條件為false，則什麼也不做，只有在條件為true時才會進行初次編譯。

而v-show則是「懶惰」的，不管初始條件是什麼，它都會在初始渲染時被編譯。並且，每次略微開銷大一點，因為它需要在切換時切換 CSS 樣式。一般來說，v-if更適合在運行時很少改變條件，不需要頻繁切換的場景；v-show則更適合需要非常頻繁切換的場景。

2. 性能消耗

v-if是惰性的，如果初始條件為false，則什麼也不做，只有在條件為true時才會初次編譯和掛載，這樣可以節約一些初次渲染的性能；

v-show則是一直在頁面上，只是在CSS中進行隱藏，所以在切換過程中不需要像v-if那樣創建和銷毀元素，所以雖然v-show在初始渲染時會和$v-if有一點性能損失，但是在頻繁切換時，v-show的性能更高。

三、v-if和v-for的使用

v-if和v-for是經常一起使用的。下面是一個示例代碼，用來說明如何在v-for循環內部使用v-if：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      <div v-if="item.checked">{{ item.name }}</div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Vue', checked: true },
        { name: 'React', checked: true },
        { name: 'Angular', checked: false },
      ],
    };
  },
};
</script>

在上面的代碼中，使用了v-for遍歷list數組，然後使用v-if判斷item.checked的值，如果為true，則渲染出item.name。

四、使用v-if和v-else-if和v-else進行多重判斷

有時候，我們需要根據不同的條件渲染不同的內容，這時候就需要使用v-else-if指令了。

<template>
  <div>
    <div v-if="type === 'A'">A類型的內容</div>
    <div v-else-if="type === 'B'">B類型的內容</div>
    <div v-else>其他類型的內容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: 'A',
    };
  },
};
</script>

在上面的代碼中，使用了v-if, v-else-if和v-else指令對type的值進行了多重判斷。當type的值為’A’時，渲染”A類型的內容”；當type的值為’B’時，渲染”B類型的內容”；當type的值為其他內容時，渲染”其他類型的內容”。

五、v-if和v-show的語法糖

在Vue 2.5.0及以上版本中，還提供了一種新寫法來使用v-if和v-show指令，稱為「語法糖」。

1. v-if語法糖：

<template>
  <div v-if="name">Hello {{ name }}!</div>
</template>

可以使用下面這種寫法來代替上面的代碼：

<template>
  <div v-if="name">{{`Hello ${name}!`}}</div>
</template>

使用${}來代替 {{ }}，並且使用“來代替””。

2. v-show語法糖：

<template>
  <div v-show="isShow">Hello world!</div>
</template>