Tính phản ứng của mảng trong Vue
Tính phản ứng hoạt động ngay cả với những thay đổi
trong mảng được hiển thị thông qua v-for.
Hãy lấy ví dụ để khi nhấp vào một nút, một phần tử mới
sẽ được thêm vào mảng một cách phản ứng và những thay đổi
sẽ lập tức xuất hiện trên màn hình.
Hãy triển khai điều đã mô tả. Giả sử chúng ta có một mảng:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Hãy hiển thị các phần tử của mảng này trong một vòng lặp:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Tạo một nút mà khi nhấp vào một phần tử mới sẽ được thêm vào mảng:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Triển khai phương thức tương ứng:
methods: {
add: function() {
this.arr.push('xxx');
}
}
Cho một nút. Cho một mảng. Hiển thị các phần tử
của mảng này dưới dạng danh sách ul. Thực hiện
sao cho khi nhấp vào nút, một mục mới sẽ được thêm vào
cuối danh sách này.
Cho một nút. Cho một mảng. Hiển thị các phần tử
của mảng này dưới dạng danh sách ul. Thực hiện
sao cho mỗi lần nhấp vào nút,
mục đầu tiên của danh sách sẽ bị xóa.
Cho một nút. Cho một mảng. Hiển thị các phần tử
của mảng này dưới dạng danh sách ul. Thực hiện
sao cho mỗi lần nhấp vào nút,
mục cuối cùng của danh sách sẽ bị xóa.
Cho một nút. Cho một mảng. Hiển thị các phần tử
của mảng này dưới dạng danh sách ul. Thực hiện
sao cho mỗi lần nhấp vào nút,
mục áp chót của danh sách sẽ bị xóa.
Cho một nút. Cho một mảng. Hiển thị các phần tử
của mảng này dưới dạng danh sách ul. Thực hiện
sao cho khi nhấp vào nút,
các mục trong danh sách sẽ được sắp xếp.
Cho một nút. Cho một mảng. Hiển thị các phần tử
của mảng này dưới dạng danh sách ul. Thực hiện
sao cho khi nhấp vào nút,
các mục trong danh sách sẽ được sắp xếp
theo thứ tự ngược lại.
Ngoại lệ
Do những hạn chế của JavaScript, Vue không thể
phát hiện những thay đổi sau đây trong mảng: việc gán trực tiếp
một phần tử theo chỉ mục: items[chỉ_mục]
= giá_trị_mới và việc thay đổi rõ ràng độ dài
của mảng, ví dụ: items.length = độ_dài_mới.
