title | type | order |
---|---|---|
Render theo điều kiện |
guide |
7 |
Trong các thư viện biên dịch template như Handlebars, thông thường chúng ta sẽ viết các khối điều kiện (conditional block) như sau:
{{#if ok}}
<h1>Mọi việc ổn cả</h1>
{{/if}}
Để làm điều này với Vue, chúng ta sử dụng directive v-if
:
<h1 v-if="ok">Mọi việc ổn cả</h1>
Chúng ta cũng có thể thêm khối "else" bằng v-else
:
<h1 v-if="ok">Mọi việc ổn cả</h1>
<h1 v-else>Có gì đó sai sai</h1>
Vì là một directive, v-if
phải được dùng trên một phần tử đơn lẻ (single element) như <p>
hoặc <div>
. Nếu chúng ta muốn bật tắt một nhóm các phần tử thì sao? Chỉ cần dùng v-if
trên một phần tử <template>
với vai trò wrap (bọc) các phần tử lại thành một nhóm. Kết quả render cuối cùng sẽ không có phần tử <template>
này.
<template v-if="ok">
<h1>Anh chàng chăn lợn</h1>
<p>Ơ này, Augustin thân mến ơi</p>
<p>Mọi việc đều như ý, như ý, như ý</p>
</template>
Như trên đã nhắc đến, ta có thể dùng directive v-else
để chỉ định một khối "else" cho v-if
:
<div v-if="Math.random() > 0.5">
Tài
</div>
<div v-else>
Xỉu
</div>
Để được coi là hợp lệ, phần tử có v-else
phải theo ngay sau một phần tử v-if
hoặc v-else-if
.
2.1.0+
Directive v-else-if
đóng vai trò một khối "else if" cho v-if
. Directive này có thể được dùng nhiều lần nối tiếp nhau:
<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-if="type === 'D'">D</div>
<div v-else>Chiến Sĩ không thể nhớ nổi</div>
Tương tự với v-else
, phần tử với v-else-if
phải theo ngay sau một phần tử v-if
hoặc v-else-if
.
Vue cố gắng render các phần tử một cách hiệu quả đến mức có thể, với một trong những cách làm là sử dụng lại thay vì tạo mới từ đầu. Ngoài việc giúp cho Vue thao tác cực kì nhanh, điều này còn mang lại một số lợi ích đáng kể khác. Ví dụ, nếu bạn cho phép người dùng được đăng nhập bằng username hoặc email:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Nhập username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Nhập địa chỉ email">
</template>
thì việc chuyển đổi giá trị của loginType
trong đoạn code trên sẽ không xóa đi thông tin mà người dùng đã điền vào. Vì cả hai <template>
dùng các phần tử giống nhau, phần tử <input>
sẽ không bị thay thế, chỉ có thuộc tính placeholder
là thay đổi. Bạn có thể kiểm tra điều này bằng cách điền vào một ít thông tin bất kì rồi bấm vào nút bên dưới:
{% raw %}
Tuy nhiên không phải lúc nào đây cũng là điều bạn mong muốn. Vì thế, Vue cung cấp một thuộc tính gọi là key
. Khi dùng key
với giá trị độc nhất (unique), về căn bản bạn đang dặn Vue "xem hai phần tử này là hoàn toàn khác nhau và đừng dùng lại":
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Nhập username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Nhập địa chỉ email" key="email-input">
</template>
Bây giờ thì hai phần tử <input>
này sẽ được render lại từ đầu mỗi khi giá trị loginType
được thay đổi. Bạn có thể kiểm chứng:
{% raw %}
Lưu ý rằng các phần tử <label>
vẫn được sử dụng lại vì không có thuộc tính key
.
Một lựa chọn nữa cho việc hiện hoặc ẩn một phần tử web theo điều kiện là directive v-show
. Cách dùng v-show
cũng tương tự với v-if
:
<h1 v-show="ok">Xin chào!</h1>
Điểm khác biệt giữa v-show
và v-if
là phần tử được đánh dấu với v-show
sẽ luôn luôn được render và chứa trong DOM; v-show
chỉ bật tắt thuộc tính display
của phần tử này.
`v-show` không hỗ trợ thẻ `` và cũng không hoạt động với `v-else`.
v-if
là render theo điều kiện "thật sự," vì nó bảo đảm các event listener và component con bên trong khối điều kiện được hủy và khởi tạo lại trong quá trình bật/tắt.
v-if
cũng lười biếng (lazy): nếu giá trị của điều kiện là false
trong lần render đầu tiên, 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 true
lần đầu tiên.
Trong khi đó, v-show
đơn giản hơn nhiều - phần tử sẽ được render bất kể điều kiện là đúng hay sai, và chỉ được hiện/giấu đi bằng CSS.
Nói chung, v-if
có phí tổn bật/tắt cao, còn v-show
có phí tổn render cao. Vì thế, nếu bạn cần bật/tắt thường xuyên, hãy dùng v-show
. Ngược lại, nếu điều kiện ít khi thay đổi trong suốt vòng đời của ứng dụng, hãy dùng v-if
.
Khi dùng chung với v-if
, v-for
có độ ưu tiên cao hơn. Xem chi tiết tại hướng dẫn về render danh sách.