GIỚI THIỆU
CĂN BẢN
NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

VueJS 2: Conditional Rendering (v-if và v-show)

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-ifv-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ì rendersai thì không render như lệnh if else vậy.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Đầ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>

Bài viết này được đăng tại [free tuts .net]

Nếu giá trị của oktrue 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ị oktrue 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-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.

Ví dụ RUN
<template v-if="ok">
    <h1>Học VueJS miễn phí</h1>
    <p>Tại Freetuts.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

Directive v-else-if được bổ sung kể từ 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 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 loginTypeusername 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 (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-elsev-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-ifv-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.

Cùng chuyên mục:

VueJS 2: Binding Class và Binding Style

VueJS 2: Binding Class và Binding Style

Trong bài này chúng ta sẽ tìm hiểu cơ chế ràng buộc dữ liệu (binding…

VueJS 2: Tìm hiểu Watchers

VueJS 2: Tìm hiểu Watchers

Trong bài này chúng ta sẽ tìm hiểu về Vue Watcher, đây là cách để…

VueJS2: Computed Properties

VueJS2: Computed Properties

Computed Properties dịch sang tiếng Việt rất khó hiểu nên mình sẽ dùng từ này…

VueJS 2: Tìm hiểu Methods

VueJS 2: Tìm hiểu Methods

Methods không còn xa lạ với nhưng bạn đã từng tìm hiểu qua lập trình…

VueJS 2: Template Syntax

VueJS 2: Template Syntax

Giống như những thư viện Javascript khác, việc xử lý template chủ yếu dựa vào…

VueJS 2: Tìm hiểu Vue Instance

VueJS 2: Tìm hiểu Vue Instance

Instance trong lập trình chính là thể hiện của một lớp. Ví dụ nếu bạn…

VueJS 2: Cài đặt VueJS và viết chương trình Hello World

VueJS 2: Cài đặt VueJS và viết chương trình Hello World

Trong bài này mình sẽ cùng các bạn tìm hiểu cách cài đặt và viết…

VueJS là gì?

VueJS là gì?

Hôm nay chúng ta lại tiếp tục tìm hiểu một thư viện Javascript mới, hay…

Top