Vue v-for Chỉ thị
Ví dụ
Sử dụng lệnh v-for để tạo danh sách động vật có vú, dựa trên một mảng:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to create a list of mammals based on an array.</p>
<ul>
<li v-for="x in animals">{{ x }}</li>
</ul>
</template>
Chạy Ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Lệnh v-for được sử dụng để hiển thị nhiều phần tử dựa trên nguồn dữ liệu.
Lệnh v-for được sử dụng với cú pháp "(item, key, index) in dataSource" , trong đó:
- Bí danh
"item"đại diện cho một phần tử bên trong"dataSource". - Bí danh
"key"có thể được sử dụng để lấy tên thuộc tính nếu nguồn dữ liệu là một đối tượng. - Bí danh
"index"có thể được sử dụng nếu nguồn dữ liệu là một mảng hoặc một đối tượng. -
"dataSource"phải là tên của nguồn dữ liệu thực tế mà bạn đang lặp qua.
Bạn có thể tự mình chọn tên của các bí danh "item" , "key" và "index" , nhưng thứ tự là "item, key, index" .
Đây là những nguồn dữ liệu có thể được sử dụng bởi lệnh v-for :
| Loại nguồn dữ liệu | Chi tiết | |
|---|---|---|
Array | v-for lặp qua mảng và phần tử cũng như chỉ mục của từng phần tử có thể được chọn và sử dụng. | Chạy Ví dụ » |
Object | v-for lặp qua Object. Tên thuộc tính, giá trị và chỉ mục có thể được chọn và sử dụng. | Chạy Ví dụ » |
number | v-for hiển thị một danh sách, trong đó mỗi mục là một số từ một và số cuối cùng là số được cung cấp. Chỉ mục của từng phần tử cũng có thể được chọn ra. | Chạy Ví dụ » |
string | v-for lặp qua chuỗi. Mỗi ký tự và chỉ mục của nó có thể được chọn và sử dụng. | Chạy Ví dụ » |
Iterable | v-for cũng có thể lặp qua các lần lặp. Iterables là các giá trị sử dụng Iterable Protocol, như Map và Set. | Chạy Ví dụ » |
Lưu ý: Để tối ưu hóa hiệu suất, Vue sử dụng lại các phần tử được tạo bằng v-for khi nguồn dữ liệu bị thao túng. Điều này có thể dẫn đến kết quả lạ ( được giải thích ở đây ). Để ngăn Vue sử dụng lại các phần tử một cách sai lầm khi sử dụng v-for , bạn phải luôn sử dụng thuộc tính key đặc biệt với v-bind để đánh dấu duy nhất từng phần tử ( xem Ví dụ 6 ).
Thêm ví dụ
ví dụ 1
Sử dụng lệnh v-for để hiển thị danh sách các động vật có vú, dựa trên một mảng và cũng chọn chỉ mục của từng phần tử trong mảng:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to create a list of mammals, and the index of each mammal, based on an array.</p>
<ul>
<li v-for="(x, index) in animals">On index {{ index }}: "{{ x }}"</li>
</ul>
</template>
<script>
export default {
data() {
return {
animals: ['Tiger','Zebra','Wolf','Crocodile','Seal']
};
}
};
</script>
Chạy Ví dụ »Ví dụ 2
Sử dụng lệnh v-for để hiển thị danh sách các thuộc tính, chọn tên và giá trị thuộc tính cho mọi thuộc tính trong một đối tượng:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive on an Object to create a list of the object properties and the respective property values.</p>
<ul>
<li v-for="(x, key) in animal">(Property name: value) = ({{ key }}: {{ x }})</li>
</ul>
</template>
<script>
export default {
data() {
return {
animal: {
name: 'Lion',
heightCM: 110,
weightKG: 150
}
};
}
};
</script>
Chạy Ví dụ »Ví dụ 3
Sử dụng lệnh v-for để hiển thị danh sách dựa trên một số:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive with number to render a list with that number of elements.</p>
<ul>
<li v-for="(x, index) in 10">Item: {{ x }}, index: {{ index }}</li>
</ul>
</template>
Chạy Ví dụ »Ví dụ 4
Sử dụng lệnh v-for để lặp qua một chuỗi ký tự:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to loop through the characters in a string.</p>
<ul>
<li v-for="(x, index) in 'Ice cream'">Item: "{{ x }}", index: {{ index }}</li>
</ul>
</template>
Chạy Ví dụ »Ví dụ 5
Sử dụng lệnh v-for để lặp qua một đối tượng được tạo bằng Giao thức lặp:
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive to render a list, based on an object created with the Iterable Protocol.</p>
<ul>
<li v-for="value in iterableObject">{{ value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
iterableObject: this.createIterable(['City', 'Park', 'River'])
};
},
methods: {
createIterable(array) {
let currentIndex = -1;
return {
[Symbol.iterator]: function () {
return {
next: () => {
if (currentIndex < array.length - 1) {
currentIndex++;
return { value: array[currentIndex], done: false };
} else {
return { done: true };
}
}
};
}
};
}
}
};
</script>
Chạy Ví dụ »Ví dụ 6
Sử dụng lệnh v-for để hiển thị một phần tử div cho mỗi ký tự trong chuỗi. Bạn luôn nên sử dụng v-bind:key với lệnh v-for :
<template>
<h2>Example v-for Directive</h2>
<p>Using the v-for directive with 'v-bind:key' to render DIV elements, based on a string of characters.</p>
<div id="wrapper">
<div v-for="x in text" v-bind:key="x">{{ x }}</div>
</div>
</template>
<script>
export default {
data() {
return {
text: 'I love ice cream.'
};
}
};
</script>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
width: 280px;
}
#wrapper > div {
margin: 5px;
padding: 5px 10px;
border: solid black 1px;
background-color: lightgreen;
}
</style>
Chạy Ví dụ »Trang liên quan
Hướng dẫn JavaScript: JS Iterables
Hướng dẫn Vue: Chỉ thị Vue v-for
Hướng dẫn Vue: Vue v-for Components
Hướng dẫn Vue: Vue Animations với v-for
Tham chiếu Vue: Thuộc tính 'key' của Vue
