首頁 > web前端 > js教程 > 主體

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

DDD
發布: 2024-10-19 08:23:02
原創
438 人瀏覽過

Vue.js Conditional Rendering and V-if vs V-show

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

Vue.js 條件渲染

v-ifv-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-ifv-show 指令的功能和差異。了解這些差異對於最佳化渲染效能和管理 Vue.js 應用程式中的元素可見性至關重要。

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板