Svelte mẫu: vòng lặp

Tìm hiểu cách làm việc với các vòng lặp trong các mẫu Svelte

Trong các mẫu Svelte, bạn có thể tạo một vòng lặp bằng cách sử dụng{#each}{/each}cú pháp:

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog} <li>{goodDog}</li> {/each}

Nếu bạn đã quen với các khung công tác khác sử dụng các mẫu, thì đó là một cú pháp rất giống nhau.

Bạn có thể lấy chỉ mục của lần lặp bằng cách sử dụng:

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog, index} <li>{index}: {goodDog}</li> {/each}

(chỉ mục bắt đầu từ 0)

Khi chỉnh sửa động danh sách, loại bỏ và thêm các phần tử, bạn phải luôn chuyển một số nhận dạng trong danh sách để ngăn chặn sự cố.

Bạn làm như vậy bằng cách sử dụng cú pháp này:

<script>
let goodDogs = ['Roger', 'Syd']
</script>

{#each goodDogs as goodDog (goodDog)} <li>{goodDog}</li> {/each}

<!-- with the index --> {#each goodDogs as goodDog, index (goodDog)} <li>{goodDog}</li> {/each}

Bạn cũng có thể chuyển một đối tượng, nhưng nếu danh sách của bạn có một số nhận dạng duy nhất cho mỗi phần tử, thì tốt nhất nên sử dụng nó:

<script>
let goodDogs = [
  { id: 1, name: 'Roger'},
  { id: 2, name: 'Syd'}
]
</script>

{#each goodDogs as goodDog (goodDog.id)} <li>{goodDog.name}</li> {/each}

<!-- with the index --> {#each goodDogs as goodDog, index (goodDog.id)} <li>{goodDog.name}</li> {/each}

Tải xuống miễn phí của tôiSổ tay Svelte


Các hướng dẫn nhỏ gọn hơn: