摘要

v-if 指令組用於根據條件，來決定是否要「真正地」從 DOM 結構中渲染或移除一個元素區塊。

定義與說明

v-if

當其表達式為 true 時，渲染元素；為 false 時，將元素從 DOM 中徹底移除。

v-else-if

提供多個額外的條件判斷。

v-else

作為 v-if 或 v-else-if 條件不成立時的預備選項。

這三者必須相鄰使用才能構成邏輯鏈。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const score = ref(85);
</script>

<template>
  <div v-if="score >= 90">優</div>
  <div v-else-if="score >= 80">良</div>
  <div v-else>中</div>
</template>

結論

v-if 指令組賦予了模板進行邏輯決策的能力。它透過動態地新增或刪除 DOM 元素，來實現畫面的條件式呈現，確保了高效能。

v-if 條件渲染 DOM 操作