Giới thiệu về kết xuất danh sách trong Vue
Một trong những nhiệm vụ phổ biến nhất trong phát triển web là hiển thị danh sách dữ liệu. Vue xử lý việc này với sự trợ giúp của v-cho chỉ thị. Bạn sẽ khám phá lệnh v-for là gì, cách xóa các mục khỏi danh sách và cách hiển thị danh sách bằng các khóa.
Mục Lục
Chỉ thị v-for trong Vue là gì?
Các v-cho chỉ thị là một trong những chỉ thị của Vue cho phép bạn kết xuất danh sách với mã JavaScript tối thiểu. Các v-cho lệnh hoạt động tương tự như vòng lặp for trong JavaScript và có thể lặp qua các mảng và đối tượng để hiển thị các mục trong danh sách.
Để tận dụng v-cho chỉ thị, cung cấp một mảng bạn muốn lặp lại trong dữ liệu thuộc tính của đối tượng Options trong Vue.
Ví dụ:
<template>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
</template><script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
};
</script>
Khối mã ở trên mô tả một ví dụ về ứng dụng Vue sử dụng v-cho chỉ thị để lặp lại trên tên mảng được cung cấp trong dữ liệu tài sản.
v-cho có một giá trị được đặt thành một biểu thức có hai phần: biến lặp (tên) và tên mảng v-cho chỉ tới. Biến lặp giữ mỗi tên bên trong tên mảng và hiển thị tên.
Vue tạo một phần tử Mô hình đối tượng tài liệu (DOM) mới cho mỗi tên bên trong tên mảng và hiển thị nó trên trang web.
Nếu tên thay đổi mảng (ví dụ: tên mới được thêm vào hoặc tên cũ bị xóa), Vue sẽ tự động cập nhật DOM ảo và kết xuất lại danh sách để phản ánh dữ liệu đã cập nhật.
Vue cũng cung cấp một cách để lấy chỉ mục của một phần tử trong danh sách.
<li v-for="(name,index) in names">{{ name }} -- {{ index }}</li>
Đoạn mã trên mô tả cú pháp hiển thị chỉ mục của mỗi tên bên trong tên mảng.
Bạn cũng có thể sử dụng các v-cho lệnh để lặp qua một dãy số:
<li v-for="num in 10">Vue is Nice</li>
Đoạn mã trên sẽ hiển thị một danh sách với văn bản Vue thật tuyệt mười lần. Các v-cho lệnh cũng có thể lặp qua một dãy số để hiển thị lặp lại dữ liệu hoặc thực hiện một thao tác. Trong trường hợp này, các con số biến lặp được sử dụng để truy cập mục hiện tại trong danh sách.
Cách xóa các mục khỏi danh sách trong Vue
Bạn có thể cho phép người dùng xóa các mục khỏi danh sách trong ứng dụng web của mình. Tính năng này hữu ích khi xây dựng các ứng dụng như danh sách việc cần làm.
Bạn có thể dùng mối nối Phương thức JavaScript (đó là một trong những cách xóa các mục khỏi mảng) để xóa một mục khỏi danh sách trong Vue.
array.splice(startIndex, numToRemove, newElements)
Phương thức mối nối có thể thêm hoặc xóa các phần tử khỏi một mảng. Phương thức mối nối nhận các tham số theo thứ tự sau:
- Các bắt đầu Index tham số đặt chỉ mục để bắt đầu sửa đổi mảng.
- numToRemove cho biết số mục bạn muốn xóa khỏi mảng.
- cuối cùng yếu tố mới tham số mà bạn có thể sử dụng để thêm các phần tử vào mảng. Nếu không có phần tử nào được chỉ định, nối() sẽ chỉ xóa các phần tử khỏi mảng.
Để sử dụng phương thức mối nối để xóa một mục khỏi danh sách trong Vue, bạn cần biết chỉ mục của mục đó. Một cách để đạt được điều này là vượt qua mục lục làm đối số cho một phương thức xử lý việc xóa mục đó.
Ví dụ: bạn có thể thêm một nút bên cạnh mỗi tên trong mảng kích hoạt phương thức xóa mục khi người dùng nhấp vào mục đó:
<template>
<ul>
<li v-for="(name,index) in names">
{{ name }} -- {{ index }}
<button @click="removeItem(index)">Remove</button>
</li>
</ul>
</template>
Các mục lục tham số cho phép chúng tôi truy cập vào chỉ mục của từng tên trong mảng mà chương trình này chuyển làm đối số cho loại bỏ mục phương pháp. Các loại bỏ mục phương pháp sau đó có thể sử dụng mối nối phương pháp loại bỏ một tên từ tên mảng:
<script>
export default {
data() {
return {
names: ['John', 'Doe', 'James'],
};
},
methods: {
removeItem(index) {
this.names.splice(index, 1);
}
}
};
</script>
Kịch bản trên sử dụng mối nối phương pháp để xóa một tên khỏi danh sách tên được hiển thị. Điều này sẽ tự động cập nhật danh sách trong giao diện người dùng để phản ánh mảng được cập nhật.
Cách kết xuất danh sách bằng các phím trong Vue
Các chìa khóa thuộc tính là một thuộc tính duy nhất mà Vue sử dụng để theo dõi danh tính của từng mục trong danh sách. Khi một mục trong danh sách thay đổi, với sự trợ giúp của chìa khóa thuộc tính Vue có thể nhanh chóng cập nhật DOM mà không cần kết xuất lại toàn bộ danh sách.
Hãy xem một ví dụ về cách hiển thị danh sách bằng các khóa trong Vue:
<template>
<div>
<ul>
<li v-for="name in names" :key="name.id">
{{ name.name }}
<button @click="removeItem(name.id)">Remove</button>
</li>
</ul>
</div>
</template><script>
export default {
data() {
return {
names: [
{ id: 1, name: "John"},
{ id: 2, name: "Doe"},
{ id: 3, name: "James"},
],
};
},
methods: {
removeItem(key) {
this.names.splice(key - 1, 1);
},
},
};
</script>
Trong ví dụ này, bạn có một danh sách các mục có giá trị duy nhất nhận dạng của cải. Khối mã sử dụng chìa khóa thuộc tính với v-cho để theo dõi danh tính của từng mục trong danh sách. Điều này cho phép Vue cập nhật DOM một cách hiệu quả khi danh sách thay đổi.
Nếu bạn xóa một mục khỏi danh sách, Vue sẽ cập nhật DOM mà không phải kết xuất lại toàn bộ danh sách. Điều này là do Vue giữ danh tính của từng mục trong danh sách và chỉ có thể cập nhật những mục đã thay đổi.
Các chìa khóa thuộc tính phải là mã định danh duy nhất cho mỗi mục trong danh sách. Đây có thể là một nhận dạng thuộc tính hoặc bất kỳ số nhận dạng duy nhất nào khác có thể được sử dụng để theo dõi mặt hàng đó.
Sử dụng chìa khóa thuộc tính với v-cho chỉ thị giúp tránh các vấn đề kết xuất. Ví dụ: khi xóa tên, Vue sử dụng chìa khóa thuộc tính để duy trì thứ tự của các mục trong danh sách.
Chỉ thị Vue là cần thiết
Tại đây, bạn đã trình bày kiến thức cơ bản về kết xuất danh sách trong Vue, bao gồm xóa các mục khỏi danh sách và kết xuất danh sách bằng khóa. Bạn có thể xây dựng các giao diện đáp ứng để xử lý các danh sách dữ liệu phức tạp bằng cách hiểu các khái niệm này.
Vue có rất nhiều chỉ thị cho các mục đích khác nhau, bao gồm kết xuất có điều kiện, ràng buộc sự kiện và ràng buộc dữ liệu. Hiểu các chỉ thị này có thể giúp bạn tạo các ứng dụng web tương tác hiệu quả.