EP7 - 條件渲染

2024/09/15閱讀時間約 1 分鐘

Conditional Rendering 這是什麼？
符合條件就渲染嗎？怎麼感覺v-bind也可以達到條件渲染
應該還是有點區別吧～先來看看吧

v-if

指令 v-if 用於有條件地渲染區塊。只有當指令表達式返回真值，該區塊才會被渲染。

<template>
  <h1 v-if="awesome">Vue is awesome!</h1>
</template>

v-else

你可以使用 v-else 指令來為 v-if 指定一個 "else 區塊"：

<template>
  <button @click="awesome = !awesome">Toggle</button>
  
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

Try it in the playground

v-else-if

v-else-if，顧名思義，用於作為 v-if 的「else if 區塊」。它可以多次鏈接使用：

<template>
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
</template>

與 v-else 類似，v-else-if 元素必須緊跟在 v-if 或 v-else-if 元素之後。

v-if 用於 <template>

因為 v-if 是一個指令，所以它必須附加到單個元素上。但是，如果我們想切換多個元素呢？在這種情況下，我們可以在 <template> 元素上使用 v-if，它充當一個隱形的包裝器。最終渲染的結果將不包括 <template> 元素。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

另一種條件顯示元素的選擇是 v-show 指令。用法基本相同：

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

不同的是，使用 v-show 的元素將始終被渲染並保持在 DOM 中；v-show 只會切換元素的 display CSS 屬性。

v-show 不支持 <template> 元素，也不能與 v-else 一起使用。

v-if vs. v-show

v-if 是“真實”的條件渲染，因為它確保在切換時，條件塊內的事件監聽器和子組件會被正確地銷毀和重新創建。
v-if 也是懶的：如果初始渲染時條件為假，則不會執行任何操作，直到條件第一次變為真時，條件區塊才會被渲染。
v-show 相對簡單 — 元素無論初始條件如何，總是會被渲染，只是基於 CSS 的切換。

v-if 與 v-for

注意：不建議在同一元素上使用 v-if 和 v-for，因為它們之間存在隱式的優先順序。請參閱風格指南以獲取詳細信息。

當 v-if 和 v-for 同時用於同一元素時，v-if 會首先被評估。請參見列表渲染指南以獲取詳細信息。

Q: 等等!!! 什麼是v-for？

內容跳來跳去介紹各種元素，沒有人能有空讀完全部官方文件～
只好先查一下了～

v-for 是 Vue.js 中用來進行列表渲染的指令。它可以讓你根據一個陣列或物件中的數據動態生成一組元素。

v-for 的基本語法是：

<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

這裡 items 是一個陣列，item 是陣列中的每一個元素。v-for 會為 items 中每個元素生成一個 <div> 元素，並將 item.name 的值顯示在每個 <div> 元素中。

1. 循環陣列

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

data() {
  return {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' }
    ]
  }
}

2. 循環物件

<ul>
  <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>

data() {
  return {
    object: {
      name: 'Vue',
      type: 'Framework',
      version: '3.x'
    }
  }
}

3. 循環數字範圍

<ul>
  <li v-for="n in 10" :key="n">{{ n }}</li>
</ul>

這會渲染從 1 到 10 的數字列表。

使用 :key 屬性可以幫助 Vue 在更新虛擬 DOM 時更高效地跟蹤每一個項目。key 應該是唯一的，以便 Vue 能夠正確識別每個元素的變化。

Q: 有沒有辦法在vocus上展現vue組件?

無法，只好點擊連結去playground才能測試。
原本是想寫文章在Github Pages上架的網站，那邊應該可以放上組件～
但還是vocus的SEO做得比較好啊～先養成技術文章撰寫好了www~

Q: 為什麼文件會寫template tag？有時候卻沒有？

在 Vue 的文件中，有時候會看到 template 標籤，有時候則沒有，這取決於示例代碼的上下文和具體展示的內容。以下是幾種常見情況的解釋：

1. 完整的 Vue 組件示例

當展示一個完整的 Vue 組件時，通常會包括 template 標籤，script 標籤，甚至 style 標籤，這樣可以展示組件的結構和各部分的相互關係

<template>
  <div>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      awesome: true
    }
  }
}
</script>

<style>
/* 組件的樣式 */
</style>

2. 局部代碼片段

當文件中僅僅展示某個特定功能或特性的代碼片段時，通常只包含必要的代碼，省略了 template 標籤，以便讀者能夠專注於當前展示的特性。

例如，只展示 v-if 指令的用法：

<h1 v-if="awesome">Vue is awesome!</h1>

或者展示計算屬性的定義：

const computedValue = computed(() => {
  return someReactiveValue * 2;
});

3. 專注於某個部分的示例

在一些情況下，文件只需要展示 template 部分，或者只需要展示 script 部分，這樣可以更清晰地表達當前的重點內容。

例如，展示如何使用 v-if 和 v-else：

<template>
  <button @click="awesome = !awesome">Toggle</button>
  
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

或者展示如何定義一個響應式數據：

<script>
export default {
  data() {
    return {
      awesome: true
    }
  }
}
</script>

Q: 差異 v-if, v-bind:style, v-bind:class

使用 v-if

v-if 會根據條件動態地創建或銷毀 DOM 元素：

<template>
  <div v-if="isVisible">這個元素根據 isVisible 來顯示或隱藏</div>
</template>

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

const isVisible = ref(true)
</script>

使用 v-bind:style

可以通過 v-bind:style 動態綁定 display 屬性來實現顯示或隱藏效果：

<template>
  <div :style="{ display: isVisible ? 'block' : 'none' }">這個元素根據 isVisible 來顯示或隱藏</div>
</template>

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

const isVisible = ref(true)
</script>

使用 v-bind:class

可以通過 v-bind:class 動態添加或移除 CSS 類來實現顯示或隱藏效果：

<template>
  <div :class="{ hidden: !isVisible }">這個元素根據 isVisible 來顯示或隱藏</div>
</template>

<style>
.hidden {
  display: none;
}
</style>

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

const isVisible = ref(true)
</script>

比較

v-if：
- 優點：當條件為假時，元素及其子元素不會被創建，節省了 DOM 的開銷。
- 缺點：每次條件變化時，元素會被重新創建或銷毀，性能開銷較大。
v-bind：style
- 優點：僅通過更新 display 樣式屬性來顯示或隱藏元素，不會銷毀元素，性能較好。
- 缺點：元素仍然存在於 DOM 中，只是不可見。
v-bind：class
- 優點：通過添加或移除 CSS 類來顯示或隱藏元素，靈活且性能較好。
- 缺點：需要額外定義 CSS 類來實現隱藏效果。

慢慢對於這個框架有了基礎的概念～
好像真的很方便耶，但怎麼還有這麼多內容要看啊www
假如比較複雜的邏輯要怎麼實現？然後很期待可重復性能有多高？

1會員

24內容數

分享生活趣事～

留言0

查看全部

發表第一個留言支持創作者！

卡關的人生的其他內容

EP6 - 類別與風格綁定

這篇文章介紹了在 Vue.js 前端框架中如何有效地綁定 Class 和 Style。透過使用 v-bind 指令，使用者可以動態地切換元素的類別和內聯樣式，這不僅能夠簡化程式碼，還能防止錯誤的發生。文章中探討了物件和陣列綁定的使用情境，以及如何在組件中應用這些技術，從而提升開發效率與程式的可讀性。

#開發 #文件 #學習

EP5 - 計算屬性

本文介紹了計算屬性（Computed Properties）的基本概念及其在前端框架中的應用，特別是 Vue.js。計算屬性允許我們根據其他響應式數據進行計算並且自動跟蹤依賴，避免不必要的重複計算。本文還探討瞭如何使用可寫入的計算屬性，以及最佳實踐建議，以確保性能與代碼的可讀性。

#學習 #文件 #開發

EP4 - 反應性基礎

本文深入探討 Vue.js 中的響應式原理，特別是 Composition API 中的 ref() 和 reactive() 使用。通過示例分析這些概念，並比較二者的優缺點，幫助開發者更清晰地理解響應式狀態的管理與最佳實踐。瞭解如何有效地聲明和管理響應式狀態，對於提升 Vue 開發的效率至關重要。

#文件 #開發 #學習