1. การแสดงผลแบบเงื่อนไขคืออะไร?

การแสดงผลแบบเงื่อนไข (Conditional Rendering) ใน Vue.js ช่วยให้คุณสามารถแสดงหรือซ่อนองค์ประกอบใน HTML ได้ตามเงื่อนไขที่กำหนด โดยใช้ Directive อย่าง v-if, v-else, v-else-if และ v-show เพื่อควบคุมการแสดงผล

2. การใช้ v-if

v-if ใช้สำหรับแสดงองค์ประกอบตามเงื่อนไขที่กำหนด

ตัวอย่าง:

<template>
  <div>
    <p v-if="isLoggedIn">Welcome back, User!</p>
    <p v-else>Please log in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

ผลลัพธ์:

• ถ้า isLoggedIn เป็น true จะแสดงข้อความ “Welcome back, User!”
• ถ้า isLoggedIn เป็น false จะแสดงข้อความ “Please log in.”

3. การใช้ v-else และ v-else-if

• v-else ใช้เมื่อเงื่อนไข v-if ไม่เป็นจริง
• v-else-if ใช้สำหรับเพิ่มเงื่อนไขเพิ่มเติม

ตัวอย่าง:

<template>
  <div>
    <p v-if="status === 'success'">Operation was successful!</p>
    <p v-else-if="status === 'error'">There was an error.</p>
    <p v-else>Unknown status.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'error'
    };
  }
};
</script>

ผลลัพธ์:

• ถ้า status เป็น success จะแสดง “Operation was successful!”
• ถ้า status เป็น error จะแสดง “There was an error.”
• ถ้าไม่มีเงื่อนไขใดตรงกัน จะแสดง “Unknown status.”

4. การใช้ v-show

v-show ใช้สำหรับควบคุมการแสดงผลขององค์ประกอบผ่าน CSS โดยการตั้งค่า display: none แทนการลบออกจาก DOM (เหมือนกับ v-if)

ตัวอย่าง:

<template>
  <div>
    <p v-show="isVisible">This text is visible.</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

ผลลัพธ์:

• ถ้า isVisible เป็น true ข้อความจะแสดง
• ถ้า isVisible เป็น false ข้อความจะถูกซ่อน

5. ความแตกต่างระหว่าง v-if และ v-show

6. การใช้ Key ร่วมกับ v-if และ v-for

เมื่อใช้ v-if ร่วมกับ v-for ควรระบุ key ให้กับองค์ประกอบเพื่อเพิ่มประสิทธิภาพและป้องกันปัญหาในการอัปเดต DOM

ตัวอย่าง:

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isVisible: true },
        { id: 2, name: 'Item 2', isVisible: false },
        { id: 3, name: 'Item 3', isVisible: true }
      ];
    };
  }
};
</script>

ผลลัพธ์:
จะแสดงเฉพาะรายการที่ isVisible เป็น true

7. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

• การใช้ v-if, v-else, และ v-else-if สำหรับการแสดงผลแบบเงื่อนไข
• การใช้ v-show สำหรับการซ่อนและแสดงองค์ประกอบ
• ความแตกต่างระหว่าง v-if และ v-show
• การใช้ Key ร่วมกับ v-for และ v-if

ในบทถัดไป เราจะศึกษาเกี่ยวกับการวนลูปข้อมูลด้วย v-for!