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ến selectedOption trong Vue instance.
Hiển thị giá trị của biến này ngay bên dưới dropdown bằ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.

z5067101249916 57b85f0249646dd1d407d409034bdca2 jpg

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.

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 Dropdown trong VueJS 2

Two-way Binding với Dropdown bằng 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 Dropdown trong VueJS 2

Two-way Binding với Dropdown bằng 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