Trong các bài học trước đã biết cách render trong Vuejs cơ bản rồi phải ko nào. Trong bài hôm nay chúng ta sẽ đi đến cách render nâng cao trong Vuejs nhé. Vuejs cung cấp cho chúng ta một số directive có nhiệm vụ xử lý render theo điều kiện đó là v-if và v-show. Nhắc đến if chắc hẳn bạn đã biết lệnh if else trong các ngôn ngữ lập trình rồi phải không nào. Condition Rendering trong Vuejs sẽ sử dụng nguyên tắc đúng thì render và sai thì không render như lệnh if else vậy đó các bạn .
1. v-if directive
Chúng ta sử dụng v-if directive để render template theo một điều kiện nào đó.
<h5 v-if="ok">Yes</h5>
Nếu giá trị của ok là true thì thẻ h5 sẽ hiển thị, ngược lại thẻ h5 sẽ bị ẩn. Ngoài ra chúng ta cũng có thể bổ sung thêm lệnh v-else.
<h5 v-if="ok">Yes</h5> <h5 v-else>NO</h5>
Nếu giá trị ok là true thì thẻ h5 đầu tiên sẽ hiển thị, ngược lại thẻ h5 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 như sau
<template v-if="ok"> <h1>Học VueJS miễn phí</h1> <p>Tại Freetuts.net</p> </template>
Đến đây có lẽ bạn sẽ tự hỏi 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.
v-else và v-else-if directive
Directive v-else-if được bổ sung kể từ Vuejs version 2.1 trở lên.
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.
<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ìm hiểu thuộc tính key
Vue có tốc độ rất nhanh vì nó biết tận dụng mọi dữ liệu đã có sẵn, nghĩa là Vue 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.
Chúng ta xét ví dụ dưới đây trên trang chủ của Vue:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </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).
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
2. v-show directive
Ngoài v-if 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 (thực ra nó vẫn render các bạn nhé).
<h5 v-show="ok">Hello!</h5>
3.Sự khác nhau giữa v-show và v-if:
- 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.
- 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.
- 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.
Khi nào nên dùng v-if khi nào nên dùng v-show?
- Đối với trường hợp dữ liệu thay đổi nhiêu trong một lần chạy thì bạn nên chọn v-show vì nó chỉ render lần đầu khi chạy.
- Còn đối với dữ liệu không thay đổi trong 1 lần chạy thì lên chọn v-if vì nó có tính chất private hơn.
4. Lời kết
Trên đây là hai loại Conditional Rendering v-if và v-show dùng để xử lý điều kiện, vẫn còn một vài Conditional khác thế nhưng mình xin hẹn các bạn ở trong bài học sau nhé. Chúc các bạn học tốt!
