Bài viết được sự cho phép của tác giả Kien Dang Chung
Trong bài trước chúng ta đã làm quen với khái niệm câu lệnh (directive) trong Vue, với mỗi ngôn ngữ các cú pháp in, điều kiện, vòng lặp là những cú pháp cơ bản nhất. Bài viết này sẽ đi sâu vào các câu lệnh điều kiện là những chỉ thị có điều kiện giúp cho bộ biên dịch của Vue.js có thể ra quyết định khi nào thì sinh mã HTML như thế này, khi nào thì làm việc khác… Một câu hỏi đặt ra, trong biểu thức Javascript chúng ta có thể đưa vào điều kiện, vậy cần gì đến các câu lệnh v-if, v-show?
Xem thêm việc làm tuyển dụng Vuejs lương cao hấp dẫn trên TopDev
v-if
Sử dụng câu lệnh v-if trong các thẻ HTML cho phép render các phần tử và nội dung theo các điều kiện dựa trên dữ liệu thuộc tính hoặc các biến trong Javascript. Ví dụ, người dùng nhập vào họ tên, giới tính, hiển thị câu chào thích hợp với các màu sắc theo giới tính.
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về v-if - Allaravel.com</title>
</head>
<body>
<div id="app">
<h1 v-if="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>
<h1 v-else-if="user.gender == 2 && user.name != null" style="color: green">Chào chị {{ user.name }}</h1>
<h1 v-else style="color: blue">Ví dụ về v-if</h1>
<br>
<label>Họ và tên</label>
<input v-model="user.name" placeholder="Nhập vào tên bạn">
<br>
<label>Giới tính</label>
<select v-model="user.gender">
<option value="1">Nam</option>
<option value="2">Nữ</option>
</select>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
user: {}
}
})
</script>
</body>
</html>[jsfiddle url=”https://jsfiddle.net/allaravel/betgLdox/” height=”300px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]
Ví dụ trên khá là dễ hiểu, khi tên người dùng không rỗng và giới tính nam được lựa chọn, trình biên dịch sẽ kiểm tra và thấy thẻ <h1> dưới đây thỏa mãn:
<h1 v-if="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>Giống như các ngôn ngữ lập trình, cấu trúc rẽ nhánh luôn có các kiểm tra điều kiện khác là else và elseif, Vue.js cũng vậy, nó có các câu lệnh v-else, v-else-if.
v-show
Một tùy chọn khác để render có điều kiện là sử dụng câu lệnh v-show, nó khác với v-if ở chỗ v-show render tất cả các phần tử html và sau đó các phần tử này hiển thị hay không thông qua thuộc tính CSS display:none hoặc không có thuộc tính này. Ví dụ ở trên được viết lại như sau:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về v-show - Allaravel.com</title>
</head>
<body>
<div id="app">
<h1 v-show="user.gender == 1 && user.name != null" style="color: red;">Chào anh {{ user.name }}</h1>
<h1 v-show="user.gender == 2 && user.name != null" style="color: green">Chào chị {{ user.name }}</h1>
<h1 v-show="user.name == null" style="color: blue">Ví dụ về v-show</h1>
<br>
<label>Họ và tên</label>
<input v-model="user.name" placeholder="Nhập vào tên bạn">
<br>
<label>Giới tính</label>
<select v-model="user.gender">
<option value="1">Nam</option>
<option value="2">Nữ</option>
</select>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
user: {}
}
})
</script>
</body>
</html>Chạy ví dụ này và xem mã nguồn HTML bạn sẽ thấy khác so với ví dụ đầu là cả ba thẻ <h1> đều được tạo ra nhưng khi chưa nhập liệu hai thẻ <h1> đầu có thuộc tính display:none. Khi nhập liệu các giá trị thì các thẻ h1 này có thể được thêm hoặc bớt đi thuộc tính display:none để ẩn đi hoặc hiện lên cho phù hợp.
Bài tập
Thiết kế một form đăng nhập gồm địa chỉ email và mật khẩu, nếu dữ liệu nhập vào như sau:
- Địa chỉ email: test@allaravel.com
- Mật khẩu: 123456
Hiển thị lời chào “Bạn đã đăng nhập thành công”, nếu không hiển thị lời cảnh báo “Thông tin đăng nhập sai, vui lòng thử lại”.
Bạn nên thực hiện các bài tập đơn giản này, nó giúp cho việc nhớ kiến thức lâu và vận dụng kiến thức tốt hơn. Cố gắng đừng xem lời giải nếu bạn có thể tự thực hiện được.
Lời giải
<!DOCTYPE html>
<html>
<head>
<title>Bài tập sử dụng v-if Vuejs - Allaravel.com</title>
</head>
<body>
<div id="app">
<h1 v-if="user.email == 'test@allaravel.com' && user.password == '123456'" style="color: green;">Chào mừng {{ user.email }} đã đăng nhập thành công!</h1>
<h1 v-if="(user.email != 'test@allaravel.com' && user.email != null) || (user.password != '123456' && user.password != null)" style="color: red;">Thông tin đăng nhập sai, vui lòng thử lại!</h1>
<br>
<div v-if="user.email != 'test@allaravel.com' || user.password != '123456'">
<label>Địa chỉ email</label>
<input type="text" v-model="user.email">
<br>
<label>Mật khẩu</label>
<input type="password" v-model="user.password">
</div>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
user: {}
}
})
</script>
</body>
</html>Kết quả như sau:
[jsfiddle url=”https://jsfiddle.net/allaravel/wL2jfgfn/” height=”300px” include=”result,html,js” font-color=”39464E” menu-background-color=”FFFFFF” code-background-color=”f3f5f6″ accent-color=”1C90F3″]
Bài viết gốc được đăng tải tại allaravel.com
Có thể bạn quan tâm:
- 8 câu điều kiện khi render trong React
- Viết câu điều kiện tốt hơn trong Javascript
- 10 điều mọi nhà phát triển ứng dụng Android nên biết về kiến trúc Architecture
Xem thêm Việc làm IT hấp dẫn trên TopDev
