Chào mừng đến với Cafedev, nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ! Trong bài viết hôm nay, chúng ta sẽ khám phá về Vuejs với Điều kiện Render. Vuejs là một framework JavaScript phổ biến cho việc xây dựng giao diện người dùng linh hoạt và mạnh mẽ. Điều kiện render là một tính năng quan trọng trong Vuejs, giúp chúng ta điều chỉnh cách hiển thị các phần tử dựa trên điều kiện nhất định. Hãy cùng nhau tìm hiểu và khám phá thêm về cách sử dụng Vuejs để tận dụng tính linh hoạt của nó trong việc điều kiện render!
Nội dung chính
1.v-if
Hướng dẫn v-if được sử dụng để render điều kiện một khối. Khối chỉ được render nếu biểu thức của hướng dẫn trả về giá trị đúng.
<h1 v-if="awesome">Vue is awesome!</h1>2.v-else
Bạn có thể sử dụng hướng dẫn v-else để chỉ định một “khối else” cho v-if:
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>Thử nghiệm ở Play
Một phần tử v-else phải ngay lập tức theo sau một phần tử v-if hoặc v-else-if – nếu không, nó sẽ không được nhận dạng.
3. v-else-if
v-else-if, như tên gợi ý, phục vụ như một “khối else if” cho v-if. Nó cũng có thể được kết nối nhiều lần:
<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>
Not A/B/C
</div>Tương tự như v-else, một phần tử v-else-if phải ngay lập tức theo sau một phần tử v-if hoặc v-else-if.
4.v-if on <template>
Vì v-if là một chỉ thị, nó phải được gắn vào một phần tử duy nhất. Nhưng nếu chúng ta muốn chuyển đổi nhiều hơn một phần tử thì sao? Trong trường hợp này, chúng ta có thể sử dụng v-if trên một phần tử <template>, nơi đóng vai trò là một bao bọc vô hình. Kết quả cuối cùng sẽ không bao gồm phần tử <template>.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>v-else và v-else-if cũng có thể được sử dụng trên phần tử
5. v-show
Một lựa chọn khác để hiển thị một phần tử theo điều kiện là hướng dẫn v-show. Việc sử dụng chủ yếu tương tự:
<h1 v-show="ok">Hello!</h1>Sự khác biệt là một phần tử với v-show luôn được render và duy trì trong DOM; v-show chỉ chuyển đổi thuộc tính CSS display của phần tử.
6.v-if so với v-show
v-if là điều kiện render “thực sự” vì nó đảm bảo rằng các trình nghe sự kiện và các thành phần con bên trong khối điều kiện được phá hủy và tạo lại một cách đúng đắn trong quá trình chuyển đổi.v-if cũng là lười biếng: nếu điều kiện là sai trong lần render ban đầu, nó sẽ không làm gì cả – khối điều kiện sẽ không được render cho đến khi điều kiện trở thành đúng lần đầu tiên.
Trong so sánh, v-show đơn giản hơn nhiều – phần tử luôn được render bất kể điều kiện ban đầu, với việc chuyển đổi dựa trên CSS.”
Nói chung, v-if có chi phí chuyển đổi cao hơn trong khi v-show có chi phí render ban đầu cao hơn. Vì vậy, ưu tiên sử dụng v-show nếu bạn cần chuyển đổi cái gì đó rất thường xuyên, và ưu tiên sử dụng v-if nếu điều kiện có thể thay đổi ít khi chạy.
7.v-if với v-for
Cảnh báo Lưu Ý: Không khuyến khích sử dụng v-if và v-for trên cùng một phần tử do ưu tiên ngầm định. Tham khảo hướng dẫn về quy tắc kiểu dáng để biết chi tiết.
Khi v-if và v-for được sử dụng cùng một phần tử, v-if sẽ được đánh giá trước. Xem hướng dẫn về việc hiển thị danh sách để biết chi tiết.”
Chúng ta hy vọng rằng bài viết về Vuejs with Conditional Rendering đã mang lại cho bạn cái nhìn sâu sắc và cơ sở vững chắc về cách sử dụng điều kiện render trong Vuejs. Tại Cafedev, chúng tôi luôn cam kết chia sẻ những kiến thức và thông tin mới nhất về công nghệ, giúp cộng đồng phát triển mạnh mẽ hơn mỗi ngày. Đừng ngần ngại tiếp tục khám phá các bài viết khác trên trang web của chúng tôi và đừng quên tham gia vào cộng đồng Cafedev để trao đổi và học hỏi thêm nhiều hơn!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
