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?
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"]
CÁC BÀI VIẾT KHÁC
nguyen văn toàn
4 years ago
Phản hồiFirebirD
4 years ago
Phản hồiAlex
4 years ago
Phản hồibig pork
4 years ago
Phản hồiFirebirD
4 years ago
Phản hồiKi
3 years ago
Phản hồiHi, minh co the co email cua ban de hoi ve vue js duoc khong?
FirebirD
3 years ago
Phản hồiBạn gửi vào allaravel.com@gmail.com nhé!
Stella Hoang
3 years ago
Phản hồiChào anh, e hỏi chút ạ. Tại sao em chạy trên browser câu lệnh h1 ở bài tập của anh lại kh ẩn đi ạ? Chào mừng {{ user.email }} đã đăng nhập thành công!