Nguồn Tham Khảo:

VueJS Official Guide

Giới Thiệu Về Conditional Rendering:

Trong lập trình web, điều kiện rendering (Conditional Rendering) rất quan trọng để kiểm soát việc hiển thị các phần tử trên giao diện người dùng. VueJS cung cấp cho lập trình viên những công cụ mạnh mẽ để thực hiện điều này thông qua các directives như v-if, v-else-if, v-else, và v-show. Hãy cùng khám phá cách sử dụng chúng một cách chi tiết! 🤓

1. Directive v-if

v-if được sử dụng để chỉ định một phần tử trong DOM chỉ được hiển thị khi điều kiện tương ứng trả về giá trị true.

<h1 v-if="awesome">Vue là tuyệt vời!</h1>

2. Directive v-else

Sử dụng v-else để xác định khối 'else' cho v-if. Một v-else cần phải nằm ngay sau v-if hoặc v-else-if để được nhận diện.

<button @click="awesome = !awesome">Chuyển đổi</button>
<h1 v-if="awesome">Vue là tuyệt vời!</h1>
<h1 v-else>Ôi không 😢</h1>

3. Directive v-else-if

Khi bạn cần kiểm tra nhiều điều kiện hơn, v-else-if là lựa chọn thích hợp. Giống như v-else, v-else-if cũng phải nằm ngay sau v-if hoặc một v-else-if khác.

<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>
  Không phải A/B/C
</div>

4. Sử Dụng v-if Với Thẻ <template>

Vì v-if là một directive, nó chỉ có thể được gắn vào một phần tử duy nhất. Nếu bạn muốn kiểm tra nhiều phần tử, bạn có thể sử dụng v-if trên một thẻ <template>, mà không làm ảnh hưởng đến kết cấu DOM cuối cùng.

<template v-if="ok">
  <h1>Tiêu đề</h1>
</template>

5. Directive v-show

Một lựa chọn khác để điều kiện hiển thị là sử dụng directive v-show. Cách sử dụng tương tự như v-if, nhưng v-show luôn giữ phần tử trong DOM và chỉ điều chỉnh thuộc tính CSS của phần tử đó để hiển thị hoặc ẩn.

Ở đây lưu ý: v-show không hỗ trợ phần tử <template> và không hoạt động cùng với v-else.

<h1 v-show="ok">Xin chào!</h1>

6. So Sánh Giữa v-if và v-show

v-show được khuyên dùng khi bạn cần hiển thị hoặc ẩn phần tử thường xuyên mà không có sự cần thiết phải thêm hay xóa chúng khỏi DOM. Dưới đây là bảng so sánh giữa hai directive này:

7. Sử Dụng v-if Kết Hợp Với v-for

Khi sử dụng v-if và v-for trên cùng một phần tử, v-if sẽ được ưu tiên hơn. Điều này có nghĩa là Vue sẽ kiểm tra điều kiện của v-if trước khi quyết định render danh sách kết quả từ v-for. Sự tương tác này giúp xây dựng các giao diện động và phản ứng linh hoạt hơn.

Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng conditional rendering trong VueJS! Hãy áp dụng để làm cho giao diện của ứng dụng web trở nên phong phú và tương tác hơn.
source: viblo