條件與列表渲染

在 Vue 3 中，條件渲染 和 列表渲染 是用來動態顯示或隱藏元素，以及根據數據渲染一組元素的功能。它們通過 Vue 提供的指令進行操作，使應用可以根據不同的狀態和數據進行靈活的展示。

---

1. 條件渲染

條件渲染是指根據條件來顯示或隱藏元素。Vue 提供了 v-if、v-else-if、v-else 和 v-show 指令來實現這種功能。

v-if

v-if 指令用來根據條件判斷是否渲染元素。如果條件為 false，該元素會完全從 DOM 中移除。

<div id="app">
  <p v-if="isVisible">這是一段可見的文字。</p>
  <button @click="toggleVisibility">切換可見性</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
});

app.mount('#app');
</script>

在這個範例中，當 isVisible 為 true 時，會顯示該段落。當點擊按鈕時，isVisible 值會變化，段落也會根據條件顯示或消失。

v-else-if 和 v-else

當有多個條件需要進行判斷時，可以使用 v-else-if 和 v-else，這樣可以處理不同的分支條件。

<div id="app">
  <p v-if="score >= 90">你獲得了A級成績</p>
  <p v-else-if="score >= 75">你獲得了B級成績</p>
  <p v-else-if="score >= 60">你獲得了C級成績</p>
  <p v-else>你未及格</p>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      score: 85
    };
  }
});

app.mount('#app');
</script>

根據 score 的不同值，對應的條件段落會被渲染。

v-show

v-show 和 v-if 的功能類似，但 v-show 只是通過設置元素的 CSS display 屬性來控制顯示與隱藏，而不會將元素從 DOM 中移除。這在需要頻繁顯示或隱藏元素時性能更高。

<p v-show="isVisible">這是一段可見的文字。</p>

v-show 的好處是 DOM 結構始終保留，但缺點是即使元素隱藏了，它依然會存在於 DOM 中。

---

2. 列表渲染

列表渲染 是用來根據數據數組或對象動態生成多個 DOM 元素的功能。Vue 提供了 v-for 指令來實現列表渲染，能夠高效地渲染一組項目。

基本使用方式

使用 v-for 指令來遍歷數組並渲染對應的元素：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item"></li>
  </ul>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      items: ['蘋果', '香蕉', '橙子']
    };
  }
});

app.mount('#app');
</script>

在這個範例中，v-for 用來遍歷 items 數組，並渲染每一個數據項為一個 li 元素。:key 是一個唯一的標識符，用於優化 Vue 的渲染性能。

遍歷對象

v-for 不僅可以用於數組，還可以用來遍歷對象的屬性。

<div id="app">
  <ul>
    <li v-for="(value, key) in person" :key="key">: </li>
  </ul>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      person: {
        name: 'John',
        age: 25,
        occupation: 'Engineer'
      }
    };
  }
});

app.mount('#app');
</script>

這裡 v-for 會遍歷 person 對象，顯示屬性名和屬性值。

遍歷數組中的索引

可以同時獲取數組的索引和數據項：

<ul>
  <li v-for="(item, index) in items" :key="index">: </li>
</ul>

用 key 優化渲染

v-for 渲染列表時，建議給每個項目設置唯一的 key 值，這樣 Vue 能夠更高效地追蹤和更新 DOM 元素。通常，應使用數據中的唯一 ID 作為 key。

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

範例：動態列表

我們可以動態地添加、刪除數據項目，並實時更新列表：

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index"></li>
  </ul>
  <input v-model="newItem" placeholder="新增項目">
  <button @click="addItem">添加</button>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      items: ['蘋果', '香蕉', '橙子'],
      newItem: ''
    };
  },
  methods: {
    addItem() {
      if (this.newItem) {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    }
  }
});

app.mount('#app');
</script>

在這個範例中，用戶可以在輸入框中輸入新的項目，並點擊按鈕動態添加到列表中。

列表渲染與條件渲染結合使用

可以結合 v-if 與 v-for 一起使用來實現條件渲染：

<ul>
  <li v-for="item in items" v-if="item.isActive" :key="item.id"></li>
</ul>

這樣只有當 item.isActive 為 true 的時候，該項目才會被渲染出來。

---

總結

• 條件渲染 通過 v-if、v-else-if、v-else 和 v-show 來動態顯示或隱藏元素。v-if 會將元素從 DOM 中完全移除，而 v-show 則僅通過 CSS 控制顯示。
• 列表渲染 使用 v-for 指令來根據數據渲染多個 DOM 元素，可以遍歷數組和對象。設置唯一的 key 值能夠提高渲染效率。

這些功能在日常的 Vue 開發中非常常用，讓開發者可以輕鬆處理動態渲染和複雜的應用場景。