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 sự kiện (Event) trong Javascript 
Các cách khai báo biến 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 Number Input trong VueJS 2
Bài tập lần này, mình đến việc làm việc với ô input kiểu number, nơi mình sử dụng Two-way binding trong VueJS 2 để liên kết giá trị và hiển thị nó ngay bên dưới ô input. Hãy cùng nhau xem 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 Number Input trong VueJS 2
Mình sẽ bắt đầu bằng việc tạo một ô input kiểu number và liên kết nó với một biến trong Vue instance. Đồng thời, hiển thị giá trị của biến đó ngay bên dưới ô input để người dùng có thể theo dõi và tương tác một cách thuận tiện.
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 Number Input</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);
}
input {
width: 100px;
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 Number Input trong VueJS 2</h1>
<input type="number" v-model="inputValue">
<p>Giá trị của ô input: {{ inputValue }}</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:
var app = new Vue({
el: '#app',
data: {
inputValue: 0 // Biến để lưu trữ giá trị của ô input kiểu number
}
});Trong đoạn mã trên:
- Sử dụng directive
v-modelđể liên kết giá trị của ô input kiểunumbervới biếninputValuetrong Vue instance. - Hiển thị giá trị của biến này ngay bên dưới ô input bằng cách sử dụng
{{ inputValue }}.
Bây giờ, bạn đã tạo một ô input kiểu number và liên kết nó với biến trong VueJS 2 thông qua Two-way binding. Khi bạn nhập giá trị vào ô input, nó sẽ tự động cập nhật và hiển thị ngay bên dưới nó.
Với bài tập Two-way Binding với Number Input trong VueJS 2, mình đã thấy rõ các của tính năng này trong việc quản lý dữ liệu người dùng. VueJS không chỉ là một công cụ phổ biến mà còn là một nguồn động lực mạnh mẽ cho sự linh hoạt và hiệu suất trong phát triển ứng dụng web.
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
