Vue.js 條件渲染和 V-if 與 V-show

如果你喜歡我的文章，可以買杯咖啡:)
買咖啡給我

Vue.js 條件渲染

v-if 和 v-show 指令用於有條件地渲染 Vue.js 中的區塊。

v-如果

在vue.js中，指令v-if用於有條件地渲染區塊。僅當指令的表達式傳回真值時才會渲染該區塊。

範例 :

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

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="show">Vue.js</h1>
</template>

您可以使用 v-else 指令來指示 v-if 的「else 區塊」。如果 v-if 指令 表達式未傳回 true，則渲染 v-else 區塊。

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

const show = ref(true)
</script>

<template>
  <button @click="show = !show">toggle</button>
    <h1 v-if="awesome"> v-if directive </h1>
    <h1 v-else> v-else directive </h1>
</template>

v-else-if

v-else-if，充當 v-if 的 「else if 區塊」。也可以多次連結。當 v-if 和 v-else-if 計算結果不為 true 時，v-else 指令被觸發。

 <p v-if="currentState === 0">State 0: Message 1</p>
    <p v-else-if="currentState === 1">State 1: Message 2</p>
    <p v-else-if="currentState === 2">State 2: Message 3</p>
    <p v-else>State 3: Message 4</p>

影片秀

當我們想要有條件地顯示某個項目時，我們可以使用 v-show 指令作為另一個選項。

<h1 v-show="ok">Ok!</h1>

不同之處在於帶有 v-show 的元素總是會被渲染並保留在 DOM 中。 v-show 變更 CSS 顯示屬性以顯示或隱藏元素。 v-show 不能與 v-else 一起使用

v-if 與 v-show

v-if 是「真正的」條件渲染，因為它確保條件區塊內的事件偵聽器和子元件在切換期間被正確銷毀和重新建立。

v-if ：如果初始渲染時條件為 false，則不會執行任何操作 - 條件區塊不會被渲染，直到條件第一次變為 true。

v-show 始終呈現並保留在 DOM 中。 v-show 變更 CSS 顯示屬性以顯示或隱藏元素。 v-show 不能與 v-else 一起使用

v-if 具有更高的切換成本，而 v-show 具有更高的初始渲染成本。如果您需要經常切換某些內容，則偏好 v-show；如果條件在運行時不太可能改變，則更喜歡 v-if。

結論

在本文中，我們研究了 v-if 和 v-show 指令的功能和差異。了解這些差異對於最佳化渲染效能和管理 Vue.js 應用程式中的元素可見性至關重要。

以上是Vue.js 條件渲染和 V-if 與 V-show的詳細內容。更多資訊請關注PHP中文網其他相關文章！