Tạo danh sách các mục và cho phép người dùng thêm mục mới vào danh sách bằng VueJS 2.

Trong bài tập này, mình sẽ giúp bạn tiếp cận với việc sử dụng Vue.js để tạo và quản lý danh sách động. Mình sẽ xây dựng một ứng dụng nhỏ cho phép người dùng thêm và hiển thị các mục mới vào danh sách.

Bằng cách sử dụng Vue directives như v-for để hiển thị danh sách và v-model để liên kết dữ liệu người dùng, chúng ta sẽ thực hành các khái niệm cơ bản của Vue.js.

Hãy cùng nhau bắt đầu để tìm hiểu cách Vue.js giúp quản lý dữ liệu và tương tác với người dùng một cách linh hoạt và dễ dàng!

File HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Binding dữ liệu động với Vue.js</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Danh sách các mục</h1>
    <ul>
      <li v-for="(item, index) in itemList" :key="index">{{ item }}</li>
    </ul>
    <div>
      <input type="text" v-model="newItem" />
      <button @click="addItem">Thêm mục</button>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

File JavaScript (main.js):

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  data: {
    itemList: ["Mục 1", "Mục 2", "Mục 3"], // Danh sách các mục ban đầu
    newItem: "", // Mục mới người dùng sẽ thêm vào danh sách
  },
  methods: {
    addItem() {
      if (this.newItem.trim() !== "") {
        this.itemList.push(this.newItem); // Thêm mục mới vào danh sách
        this.newItem = ""; // Reset trường nhập liệu
      }
    },
  },
});

Trong đoạn mã trên:

Trong phần HTML, mình sử dụng v-for để lặp qua mỗi phần tử trong itemList và hiển thị chúng dưới dạng các mục trong một danh sách (<ul> và <li>).
Đối với phần thêm mục mới, chúng ta có một trường input để người dùng nhập dữ liệu và một nút "Thêm mục" mà khi người dùng click vào, sẽ gọi đến phương thức addItem.
Trong Vue instance, chúng ta có itemList để lưu trữ danh sách các mục và newItem để lưu trữ mục mới mà người dùng nhập vào.
Phương thức addItem kiểm tra xem newItem có giá trị không rỗng, sau đó thêm nó vào itemList và sau đó reset trường nhập liệu.

Kết quả:

z5042444859883 b58a233b6cf9c0dd6f0cc2cdda7a81b0 jpg

Cấu trúc này tạo ra một ứng dụng Vue đơn giản hiển thị danh sách các mục và cho phép người dùng thêm mục mới vào danh sách.

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