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 cách khai báo biến trong Javascript 
Các sự kiện (Event) 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 Two-way binding với Dropdown trong VueJS 2
Trong bài tập này, mình sẽ tiếp tục tìm hiểu Two-way binding, lần này tập trung vào việc làm việc với dropdown. Mình sẽ tạo một dropdown và liên kết giá trị được chọn của nó với một biến trong Vue instance, đồng thời hiển thị giá trị đó ngay bên dưới dropdown. Hãy cùng nhau thực hiện và hiểu rõ hơn về cách VueJS làm cho quá trình này trở nên đơn giản và mạnh mẽ.
Two-way Binding với Dropdown bằng VueJS 2
Mình sẽ bắt đầu bằng việc tạo một dropdown và kết nối giá trị được chọn với một biến trong Vue instance. Đồng thời, hiển thị giá trị đó ngay bên dưới dropdown để người dùng có thể theo dõi trạng thái một cách dễ dàng.
File index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Two-way Binding with Dropdown</title>
<!-- Thêm đoạn CSS -->
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#app {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
select {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
p {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div id="app">
<h1>Two-way Binding với Dropdown trong VueJS 2</h1>
<select v-model="selectedOption">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<p>Giá trị được chọn: {{ selectedOption }}</p>
</div>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- Main JavaScript file -->
<script src="main.js"></script>
</body>
</html>
File main.js:
// Tạo một Vue instance
var app = new Vue({
el: '#app',
data: {
selectedOption: 'option1' // Biến để lưu trữ giá trị được chọn của dropdown
}
});
Trong đoạn mã trên:
- Sử dụng
directive v-modelđể liên kết giá trị được chọn của dropdown với biếnselectedOptiontrong Vue instance. - Hiển thị giá trị của biến này ngay bên dưới
dropdownbằng cách sử dụng{{ selectedOption }}.
Bây giờ, bạn đã tạo một dropdown và liên kết nó với biến trong VueJS 2 thông qua Two-way binding. Khi bạn chọn một tùy chọn từ dropdown, giá trị sẽ tự động cập nhật và hiển thị ngay bên dưới dropdown.
Bài tập về Two-way binding với dropdown trong VueJS 2 không chỉ là một bước tiến khác trong việc làm quen với tính năng quan trọng này mà còn là cơ hội để chúng ta hiểu rõ hơn về sự linh hoạt và tiện lợi mà VueJS mang lại. Với Two-way binding, mình có thể tạo ra các giao diện người dùng tương tác mạnh mẽ và dễ quản lý. Hãy tiếp tục tìm hiểu và áp dụng những khái niệm này vào các dự án thực tế của bạn.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Two-way binding với v-model trong VueJS 2
- Two-way binding với Checkbox trong VueJS 2
- Two-way binding với Dropdown trong VueJS 2
- Two-way binding với Textarea trong VueJS 2
- Two-way binding với Radio Buttons trong VueJS 2
- Two-way binding với Number Input trong VueJS 2
- Two-way binding và xử lý sự kiện trong VueJS 2
- Two-way binding và Form Submission trong VueJS 2
- Two-way binding và sự kiện Change trong VueJS 2
