Vue Conditional Rendering

Mục lục

1. Diagram

• v-if vs v-show Overview
• v-if Lifecycle
• v-if / v-else-if / v-else Chain
• v-if on <template>
• Performance Comparison

2. Tổng quan

3. v-if

4. v-else

5. v-else-if

6. v-if on <template>

7. v-show

8. v-if vs v-show

• When to Use v-if
• When to Use v-show
• Performance Comparison

9. v-if with v-for

10. Common Patterns

11. Best Practices

12. Kết luận

---

1. Diagram

v-if vs v-show Overview

v-if: Condition is true
    |
    v
  Render element
    |
    v
  Element in DOM

v-show: Condition is true
    |
    v
  Element is displayed
    |
    v
  Element in DOM (display: none)

v-if Lifecycle

v-if:
- Created: No
- Mounted: Yes (if condition true)
- Updated: Yes (if condition changes)
- Destroyed: Yes (if condition false)

v-show:
- Created: Yes
- Mounted: Yes
- Updated: Yes
- Destroyed: No

v-if / v-else-if / v-else Chain

v-if="condition1"
  <!-- block 1 -->
v-else-if="condition2"
  <!-- block 2 -->
v-else
  <!-- block 3 -->

v-if on `