Vue 程式札記 : 指令 v-if、v-show

指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。

Vue 指令簡介

Vue 指令（Directives）是用於在模板中提供聲明式操作 DOM 的方法。它們以 v- 作為標識，例如：v-bind、v-model、v-if 和 v-show 等。

v-if 與 v-show 的基本用法

v-if 和 v-show 都是用於條件渲染元素的指令，但它們在實現方式和適用場景上有所不同。

v-if 指令

v-if 指令是根據表達式的真假值來條件渲染元素，如果表達式的結果為真，則渲染元素；如果為假，則不渲染元素。

<div v-if="isVisible">這是一個可見的元素</div>

v-if 指令還可以與 v-else 和 v-else-if 一起使用，實現更複雜的條件渲染邏輯。

<template>
  <div>
    <p v-if="type.value === 'A'">類型 A</p>
    <p v-else-if="type.value === 'B'">類型 B</p>
    <p v-else>未知類型</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const type = ref('A');
    return { type };
  }
};
</script>

v-show 指令

v-show 指令也是用於條件渲染元素，但即使表達式的結果為假，元素仍然會被渲染到 DOM 中，只是通過 CSS 的 display 屬性將其隱藏。

<div v-show="isVisible">這是一個可見的元素</div>

v-if 與 v-show 的差異

1. 渲染方式：v-if 是條件渲染，即只有當條件為真時才渲染元素；v-show 則是始終渲染元素，只是根據條件切換元素的顯示狀態。
2. 性能考慮：由於 v-if 是條件渲染，因此初始渲染時如果條件為假，則不會渲染該元素，這可以節省一些性能。但如果條件經常改變，每次切換都會觸發元素的添加或移除，這可能會導致性能下降。相比之下，v-show 雖然始終渲染元素，但切換顯示狀態只涉及 CSS 屬性的改變，因此在需要頻繁切換顯示狀態的場景下，使用 v-show 可能會比較適合。
3. 使用場景：一般來說，如果元素的顯示狀態不太可能改變，或者在初始渲染時就需要決定元素是否渲染，那麼使用 v-if 較為合適；如果元素的顯示狀態需要頻繁切換，則使用 v-show 較為合適。

v-if 與 v-show 的實例演示

這邊我們來實作一個簡單的範例，假如我們有一個顯示按鈕和一個消息元素，消息元素的顯示狀態根據一個布林變量 showMessage 來控制。

使用 v-if：

<template>
  <button @click="toggleMessage">顯示消息</button>
  <div v-if="showMessage">這是一條消息</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showMessage = ref(false);

    function toggleMessage() {
      showMessage.value = !showMessage.value;
    }

    return {
      showMessage,
      toggleMessage,
    };
  },
};
</script>

使用 v-show：

<template>
  <button @click="toggleMessage">顯示消息</button>
  <div v-show="showMessage">這是一條消息</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showMessage = ref(false);

    function toggleMessage() {
      showMessage.value = !showMessage.value;
    }

    return {
      showMessage,
      toggleMessage,
    };
  },
};
</script>

在這個範例中，如果預計用戶會頻繁切換消息的顯示狀態，那麼使用 v-show 會是一個更好的選擇，因為它避免了不必要的 DOM 操作，從而提高了性能。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡