VueJS Bài cuối: Conditional Rendering (v-if và v-show)

Vậy là một chặng đường về VueJS cơ bản cũng đã sắp hoàn thành. Hôm nay chúng ta hãy cùng nhau tìm đến mảnh ghép cuối cùng nhé!

Trong bài này chúng ta sẽ tìm hiểu một số directive có nhiệm vụ xử lý render theo điều kiện đó là v-if và v-show. Chắc hẳn bạn đã biết lệnh if else trong Javascript rồi phải không nào? Condition Rendering sẽ sử dụng nguyên tắc đúng thì render và sai thì không render như lệnh if else vậy.

​

Đầu tiên chúng ta sẽ tìm hiểu directive v-if.
1. v-if directive
Chúng ta sử dụng v-if directive để render template theo một điều kiện nào đó.

HTML:

1. <h1 v-if="ok">Yes</h1>

Nếu giá trị của ok là true thì thẻ h1 sẽ hiển thị, ngược lại thẻ h1 sẽ bị ẩn. Ngoài ra chúng ta cũng có thể bổ sung thêm lệnh v-else.

HTML:

1.  
2. <h1 v-if="ok">Yes</h1>
3. <h1 v-else>NO</h1>

Nếu giá trị ok là true thì thẻ h1 đầu tiên sẽ hiển thị, ngược lại thẻ h1 thứ hai sẽ hiển thị.

Gom nhóm với template
Vì v-if là một directive nên bản thân nó chỉ nằm trong một thẻ HTML duy nhất, vì vậy khi bạn muốn nhiều thẻ chịu tác dụng thì bắt buộc phải sử dụng một thẻ template bao bên ngoài và đặt v-if bên trong.

HTML:

1. <template v-if="ok">
2.     <h1>Học VueJS miễn phí</h1>
3.     <p>Tại Tbit.vn</p>
4. </template>

Câu hỏi được đặt ra là ta có thể tự định nghĩa một thẻ nào khác có được không? Hoàn toàn được, tuy nhiên lúc render thẻ đó cũng sẽ xuất hiện trên giao diện, còn sử dụng thẻ template thì nó sẽ tự động xóa khỏi giao diện. Bạn hãy chạy ví dụ trên và dùng firebug để soi thử nhé.

v-else và v-else-if directive

Cũng giống như lệnh if else, bạn có thể sử dụng bộ ba directives v-if, v-else, v-else-if để rẻ nhánh.

HTML:

1. <div v-if="type === 'A'">
2.     A
3. </div>
4. <div v-else-if="type === 'B'">
5.     B
6. </div>
7. <div v-else-if="type === 'C'">
8.     C
9. </div>
10. <div v-else>
11.     Not A/B/C
12. </div>

Tìm hiểu thuộc tính key

Vue rất nhanh vì biết tận dụng mọi dữ liệu đã có sẵn, nghĩa là nó sẽ cố gắng sử dụng lại những gì đã được xử lý thay vì phải chạy từ đầu, điều này cũng có một số lợi ích nhung cũng có một số bất lợi.

Xét ví dụ dưới đây trên trang chủ của Vue.

HTML:

1. <template v-if="loginType === 'username'">
2.     <label>Username</label>
3.     <input placeholder="Enter your username">
4. </template>
5. <template v-else>
6.     <label>Email</label>
7.     <input placeholder="Enter your email address">
8. </template>

Nếu giá trị của loginType là username thi phần template phía trên sẽ được render, ngược lại phần dưới sẽ render. Tuy nhiên khi bạn thay đổi loginType từ username sang email thì Vue sẽ không lấy field input ở dưới mà nó sẽ giữ nguyên input đó và chỉ thay thế giá trị của place-holder. Để giải quyết vấn đề này thì môi input ta sẽ tạo cho nó một key duy nhất (giống ID).

HTML:

1. <template v-if="loginType === 'username'">
2.     <label>Username</label>
3.     <input placeholder="Enter your username" key="username-input">
4. </template>
5. <template v-else>
6.     <label>Email</label>
7.     <input placeholder="Enter your email address" key="email-input">
8. </template>

2. v-show directive

Ngoài v-if ra thì với những trường hợp đơn giản ta có thể sử dụng v-show để thay thế. Giá trị của v-show sẽ quyết định có hiển thị phần tử đó hay không (nó vẫn render nhé các bạn).

HTML:

1. <h1 v-show="ok">Hello!</h1>

• Sự khác nhau giữa chúng:

1. Với v-show thì chỉ ẩn và hiện các thẻ HTML bằng CSS, còn v-if thì xóa và thêm.
2. v-show không sử dụng được với template, không kết hợp được với v-else và v-else-if.
3. Với v-if nếu giá trị ban đầu là false thì các sự kiện bên trong sẽ đều bị phá hủy, và sẽ được tái tạo lại trong quá trình chuyển đổi. v-show đơn giản hơn nhiều, các phần tử luôn luôn được hiển thị cho dù đúng hay sai vì nó chỉ thay đổi CSS. Như vậy với v-show thì chi phí render cao hơn v-if nhưng chi phí chuyển đổi thì thấp hơn.

3. Lời kết

Vậy là các bạn cũng tìm hiểu tương đối hết các vấn đề cơ bản của VueJS rồi. Mình xin tạm dừng series VueJS tại đây. Nếu có yêu cầu của các bạn thì mình sẽ làm tiếp những phần nâng cao và chuyên sâu hơn. Mình hy vọng các bạn đã hiểu và biết dùng VueJS rồi. Hãy nhớ luyện tập, tham khảo thêm tại liệu nhé. Chúc bạn thành công !