Two-way binding với Checkbox trong VueJS 2

Trong bài tập này, mình sẽ tiếp tục tìm hiểu Two-way binding trong VueJS 2, tập trung vào việc làm việc với checkbox và liên kết trạng thái của nó với một biến trong Vue instance. Hãy cùng nhau thực hiện bài tập Two-way binding với checkbox và hiển thị trạng thái tương ứng ngay bên dưới nó.

Two-way Binding với Checkbox trong VueJS 2

Mình sẽ bắt đầu với việc tạo một checkbox và liên kết trạng thái của nó với một biến trong Vue instance. Đồng thời, hiển thị trạng thái đó ngay bên dưới checkbox để có trải nghiệm thực tế và minh họa cách Two-way binding hoạt độ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 Checkbox</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 {
            margin-bottom: 10px;
        }

        p {
            font-size: 16px;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="isChecked">
        <p>Trạng thái checkbox: {{ isChecked ? 'Đã chọn' : 'Chưa chọn' }}</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: {
        isChecked: false // Biến để lưu trữ trạng thái của checkbox
    }
});

Trong đoạn mã trên:

Sử dụng directive v-model để liên kết trạng thái của checkbox với biến isChecked trong Vue instance.
Hiển thị trạng thái của biến này ngay bên dưới checkbox bằng cách sử dụng {{ isChecked ? 'Đã chọn' : 'Chưa chọn' }}.

Như vậy, bạn đã tạo một ứng dụng sử dụng Two-way binding với checkbox trong VueJS 2. Khi checkbox được chọn hoặc bỏ chọn, trạng thái sẽ tự động cập nhật và hiển thị ngay bên dưới nó.

z5067070796745 a5eb2151975baaea19b397be8a9da51d jpg

z5067071588337 310ce28b676890bdd21f1eda1ce6b612 jpg

Trong bài tập này, mình đã thành công trong việc sử dụng Two-way binding của VueJS 2 để làm việc với checkbox. Việc liên kết trạng thái của checkbox với một biến trong Vue instance và hiển thị trạng thái đó ngay lập tức là một ví dụ cụ thể về cách VueJS giúp chúng ta quản lý trạng thái ứng dụng một cách thuận tiện. Hãy áp dụng những khái niệm này vào các dự án của bạn để tận dụng tối đa sức mạnh của VueJS.

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

Two-way binding với Checkbox trong VueJS 2

Two-way Binding với Checkbox trong VueJS 2

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Ref và Reactive trong VueJS 2

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

Two-way binding với Checkbox trong VueJS 2

Two-way Binding với Checkbox trong VueJS 2

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Xử lý sự kiện trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Ref và Reactive trong VueJS 2

Giới thiệu

Thủ thuật

Link hay

Liên kết