VueJS 2: Conditional Rendering (v-if và v-show) - VueJS 2x căn bản

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 đó.

<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.

<h1 v-if="ok">Yes</h1>
<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.

<template v-if="ok">
    <h1>Học VueJS miễn phí</h1>
    <p>Tại Zaidap.com.net</p>
</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. 

<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 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.

<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 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).

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

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

• 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.

3. Lời kết

Bài này mình đã giói thiệu xong hai loại diretive dùng để xử lý điều kiện đó là v-if và v-show, bài tiếp theo chúng ta sẽ tìm hiểu một directive khác dùng để lặp dữ liệu đó là v-for. À mà khoan, chúng ta nên tìm hiểu về xử lý sự kiện (event) trước để các bài sau mình sẽ đưa ra ví dụ chuyên nghiệp hơn.