Các Directive cơ bản trong Vue.js
Directive là các thuộc tính đặc biệt trong Vue giúp điều khiển cách phần tử HTML hoạt động. Trong bài học này, chúng ta sẽ tìm hiểu:
-
v-if,v-else,v-else-if– Điều kiện hiển thị nội dung. -
v-show– Hiển thị nội dung có thể toggle. -
v-for– Lặp qua danh sách (array, object). -
v-model– Liên kết dữ liệu với form input (two-way binding). -
Thực hành: Tạo danh sách động với
v-forvà form nhập liệu vớiv-model.
Các Directive cơ bản
1. v-if, v-else, v-else-if – Điều kiện hiển thị nội dung
v-if giúp hiển thị phần tử dựa trên điều kiện.
Ví dụ:
<p v-if="isLoggedIn">Chào mừng bạn!</p>
<p v-else>Vui lòng đăng nhập.</p>
data() {
return {
isLoggedIn: false
};
}
- Nếu
isLoggedIn = true, đoạn"Chào mừng bạn!"sẽ hiển thị. - Nếu
isLoggedIn = false, đoạn"Vui lòng đăng nhập."sẽ hiển thị.
Dùng v-else-if để kiểm tra nhiều điều kiện:
<p v-if="score >= 90">Xuất sắc!</p>
<p v-else-if="score >= 75">Giỏi!</p>
<p v-else-if="score >= 50">Khá!</p>
<p v-else>Chưa đạt!</p>
data() {
return {
score: 80
};
}
- Khi
score = 80, Vue sẽ hiển thị"Giỏi!".
Lưu ý:
-
v-ifloại bỏ phần tử khỏi DOM khi điều kiệnfalse. - Nếu kiểm tra nhiều điều kiện, dùng
v-else-ifthay vì nhiềuv-ifđể tối ưu hiệu suất.
2. v-show – Hiển thị nội dung có thể toggle
v-show cũng giúp hiển thị nội dung, nhưng thay vì xóa khỏi DOM, nó dùng CSS display: none.
Ví dụ:
<p v-show="isVisible">Nội dung này có thể ẩn/hiện.</p>
<button @click="isVisible = !isVisible">Toggle</button>
data() {
return {
isVisible: true
};
}
- Khi bấm nút,
psẽ ẩn hoặc hiện mà không bị xóa khỏi DOM.
So sánh v-if vs v-show:
| Directive | Khi nào nên dùng? |
|---|---|
v-if |
Dùng khi điều kiện ít thay đổi. |
v-show |
Dùng khi cần toggle nhiều lần. |
3. v-for – Lặp qua danh sách (Array, Object)
v-for giúp lặp qua danh sách để hiển thị nhiều phần tử động.
Lặp qua mảng:
<ul>
<li v-for="(user, index) in users" :key="index">
{{ index + 1 }}. {{ user.name }} - {{ user.age }} tuổi
</li>
</ul>
data() {
return {
users: [
{ name: "An", age: 25 },
{ name: "Bình", age: 30 },
{ name: "Châu", age: 28 }
]
};
}
- Vue sẽ tự động tạo danh sách
<li>từ mảngusers.
Lặp qua object:
<ul>
<li v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
data() {
return {
user: { name: "An", age: 25, job: "Developer" }
};
}
- Vue sẽ lặp qua các thuộc tính của object
user.
4. v-model – Liên kết dữ liệu với form input (Two-way binding)
v-model giúp đồng bộ dữ liệu giữa input và Vue instance.
Ví dụ cơ bản:
<input v-model="name" placeholder="Nhập tên">
<p>Xin chào, {{ name }}!</p>
data() {
return {
name: ""
};
}
- Khi nhập dữ liệu vào input, Vue sẽ cập nhật
namevà hiển thị nội dung tương ứng.
Dùng với checkbox, radio, select:
<input type="checkbox" v-model="checked"> Tôi đồng ý
<p>Bạn đã đồng ý: {{ checked }}</p>
<select v-model="selected">
<option value="vue">Vue.js</option>
<option value="react">React</option>
<option value="angular">Angular</option>
</select>
<p>Framework bạn chọn: {{ selected }}</p>
Thực hành: Tạo danh sách động với v-for và form nhập liệu với v-model
Mục tiêu:
- Hiển thị danh sách công việc.
- Cho phép người dùng thêm công việc mới vào danh sách.
Bước 1: Tạo file index.html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Directives</title>
</head>
<body>
<div id="app">
<h2>Danh sách công việc</h2>
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Xóa</button>
</li>
</ul>
<input v-model="newTask" placeholder="Nhập công việc mới">
<button @click="addTask">Thêm</button>
</div>
<script type="module" src="main.js"></script>
</body>
</html>
Bước 2: Tạo file main.js
import { createApp } from "vue";
const app = createApp({
data() {
return {
tasks: ["Học Vue.js", "Làm bài tập", "Đi tập thể dục"],
newTask: ""
};
},
methods: {
addTask() {
if (this.newTask.trim() !== "") {
this.tasks.push(this.newTask);
this.newTask = "";
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
});
app.mount("#app");
Kết quả:
- Người dùng nhập công việc mới → Click "Thêm" → Công việc hiển thị trong danh sách.
- Click "Xóa" để xóa công việc khỏi danh sách.
Kết luận
Tóm tắt kiến thức quan trọng:
-
v-if,v-else,v-else-ifgiúp hiển thị nội dung có điều kiện. -
v-showgiúp toggle hiển thị mà không xóa khỏi DOM. -
v-forlặp qua danh sách và object. -
v-modelliên kết dữ liệu hai chiều với form input. - Thực hành với danh sách công việc giúp hiểu rõ cách sử dụng các directive trong thực tế.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com