Vue.js 與 DOM 互動：v-if、v-for

Vue.js 是一個流行的前端開發框架，其強大的功能和靈活性廣受全球開發者喜愛。本文將深入探討 Vue.js 如何透過一系列的指令和功能，如 v-if、v-for 等，與 DOM（文件物件模型）進行互動。

v-if：條件渲染

在前端開發中，經常會遇到需要根據某些條件來顯示或隱藏元素的情況。Vue.js 通過 v-if 指令來達成這一目的。

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

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

在這個範例中，如果 isVisible 的值為 true，則 <p> 元素會被渲染在 DOM 中。反之，則不會。

v-else 和 v-else-if

除了 v-if，Vue.js 還提供了 v-else 和 v-else-if 指令，用於處理更複雜的條件。

<p v-if="score >= 60">及格</p>
<p v-else-if="score >= 50">補考</p>
<p v-else>不及格</p>

v-for：列表渲染

v-for 指令用於渲染一個列表，它能夠將一個陣列映射到一個元素列表。

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '蘋果' },
        { id: 2, text: '香蕉' },
        { id: 3, text: '橙子' },
      ],
    };
  },
};
</script>

複合使用：v-if 與 v-for

這兩個指令也可以組合使用，但要注意其優先級。v-for 擁有比 v-if 更高的優先級。

<template>
  <ul>
    <li v-for="item in items" :key="item.id" v-if="item.show">{{ item.text }}</li>
  </ul>
</template>

未來方向和建議

1. 組件化: 考慮將常用的 UI 元素（如帶有 v-if 和 v-for 的列表）封裝成 Vue 組件，以提高可重用性。
2. 計算屬性和監視器: 當邏輯變得複雜時，可以使用計算屬性和監視器，而不僅僅是基本的資料屬性。

總結

Vue.js 提供了多種與 DOM 互動的方式，特別是透過 v-if 和 v-for 指令，讓前端開發變得更加靈活和高效。透過理解和妥善運用這些功能，開發者不僅可以編寫出更高質量的代碼，也能更好地滿足用戶需求。