Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 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-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>
Bài viết này được đăng tại [free tuts .net]
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 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 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-showthì chỉ ẩn và hiện các thẻ HTML bằng CSS, cònv-ifthì xóa và thêm. - v-show không sử dụng được với
template, không kết hợp được vớiv-elsevà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ớiv-showthì chi phí render cao hơnv-ifnhư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.
