摘要

v-show 是另一個條件顯示指令，與 v-if 不同，它總是會渲染元素，僅透過切換 CSS 的 display 屬性來控制其顯示與隱藏。

定義與說明

v-show

基於 CSS 的切換，有較高的初始渲染成本（元素總是在 DOM 中），但切換成本較低。

v-if

是真正的條件渲染，有較低的初始渲染成本（如果條件為假），但切換成本較高（涉及 DOM 的新增和刪除）。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const isVisible = ref(true);
</script>
<template>
  <!-- isVisible 為 false 時，此元素仍在 DOM 中，但 style="display: none;" -->
  <h1 v-show="isVisible">我一直都在</h1>
</template>

結論

如何選擇：如果需要頻繁地切換顯示狀態，使用 v-show 效能更好。如果條件在執行期間很少改變，則使用 v-if 更合適。

v-show 條件顯示 CSS 切換