Mục tiêu:
- Biết cách hiển thị/ẩn phần tử với
v-if, v-else, v-show
- Biết cách lặp danh sách với
v-for
- Bắt sự kiện như click bằng
v-on (@click)
Các chỉ thị quan trọng:
| Vue Directive | Tác dụng | Ghi chú |
|---|
v-if, v-else, v-else-if | Ẩn/hiện phần tử theo điều kiện | Không render DOM nếu sai |
v-show | Tương tự v-if nhưng chỉ ẩn bằng CSS (display: none) | DOM vẫn tồn tại |
v-for="item in list" | Duyệt danh sách | Giống forEach |
v-on:event="method" | Bắt sự kiện | Viết tắt: @event |
Giao diện học (Code + Output)
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Vue Directives</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
body {
font-family: Arial;
display: flex;
gap: 30px;
padding: 20px;
}
.code {
width: 50%;
}
.output {
width: 50%;
border-left: 2px solid #ccc;
padding-left: 20px;
}
ul {
padding-left: 20px;
}
button {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="code">
<h2>Mã nguồn Vue:</h2>
<pre><code><div id="app">
<!-- v-if và v-else -->
<p v-if="isLoggedIn">Chào mừng bạn quay lại!</p>
<p v-else>Vui lòng đăng nhập.</p>
<button @click="toggleLogin">Đổi trạng thái đăng nhập</button>
<!-- v-show -->
<p v-show="showText">Đây là nội dung có thể ẩn/hiện.</p>
<button @click="showText = !showText">Ẩn / Hiện nội dung</button>
<!-- v-for -->
<h3>Danh sách sản phẩm:</h3>
<ul>
<li v-for="(item, index) in products" :key="index">
{{ index + 1 }}. {{ item }}
</li>
</ul>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
isLoggedIn: false,
showText: true,
products: ['Chuột', 'Bàn phím', 'Màn hình']
}
},
methods: {
toggleLogin() {
this.isLoggedIn = !this.isLoggedIn;
}
}
}).mount('#app')
</script>
</code></pre>
</div>
<div class="output">
<h2>Kết quả hiển thị:</h2>
<div id="app">
<!-- v-if và v-else -->
<p v-if="isLoggedIn">Chào mừng bạn quay lại!</p>
<p v-else>Vui lòng đăng nhập.</p>
<button @click="toggleLogin">Đổi trạng thái đăng nhập</button>
<!-- v-show -->
<p v-show="showText">Đây là nội dung có thể ẩn/hiện.</p>
<button @click="showText = !showText">Ẩn / Hiện nội dung</button>
<!-- v-for -->
<h3>Danh sách sản phẩm:</h3>
<ul>
<li v-for="(item, index) in products" :key="index">
{{ index + 1 }}. {{ item }}
</li>
</ul>
</div>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
isLoggedIn: false,
showText: true,
products: ['Chuột', 'Bàn phím', 'Màn hình']
}
},
methods: {
toggleLogin() {
this.isLoggedIn = !this.isLoggedIn;
}
}
}).mount('#app')
</script>
</body>
</html>
Giải thích nhanh:
| Lệnh | Tác dụng |
|---|
v-if / v-else | Hiển thị một phần tử hoặc phần tử khác tùy điều kiện |
v-show | Ẩn/hiện bằng CSS (nhanh hơn nếu chỉ toggle) |
v-for="item in list" | Lặp danh sách, hiển thị từng phần tử |
@click="method" | Gọi hàm khi click nút |
Bài tập mở rộng:
- Thêm sản phẩm mới vào
products bằng 1 nút bấm.
- Thêm một biến
role = "admin" và hiển thị "Trang quản trị" nếu là admin (dùng v-if).
- Dùng
v-for lặp qua danh sách object dạng { name, price }.
Thảo luận