（4）svelte 教程：Loops（循环）

2024-06-03 02:52

文章标签 教程循环 loops svelte

本文主要是介绍（4）svelte 教程：Loops（循环），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

（4）svelte 教程：Loops（循环）

什么是 Loops

Loops（循环） 是编程中的一种控制结构，用于反复执行某段代码，直到满足某个条件。在 Svelte 中，{#each} 是一种循环结构，用于遍历数组或可迭代对象，并为每个元素生成相应的模板内容。

逐行解释代码

<script>let people = [{ name: 'yoshi', beltColour: 'black', age: 25, id: 1 },{ name: 'mario', beltColour: 'orange', age: 45, id: 2 },{ name: 'luigi', beltColour: 'brown', age: 35, id: 3 }];
</script>

let people = [...]：
- 声明一个名为 people 的变量，并将其初始化为一个包含对象的数组。每个对象代表一个人，具有 name（名字）、beltColour（腰带颜色）、age（年龄）和 id（唯一标识符）属性。

<main>{#each people as person (person.id)}<div><h4>{person.name}</h4><p>{person.age} years old, {person.beltColour} belt.</p></div>{:else}<p> There are no people to show... </p>{/each}
</main>

部分

<main>：
- HTML <main> 元素，用于包裹组件的主要内容。
{#each people as person (person.id)}：
- Svelte 的 each 块，用于遍历 people 数组。people 数组中的每个元素（对象）被赋值给 person 变量，并在循环体内使用。
- (person.id)：这是一个键值表达式，用于帮助 Svelte 跟踪每个项的唯一性。通过 person.id，Svelte 可以高效地更新和重排 DOM。
<div>：
- HTML <div> 元素，用于包裹每个人的信息。
<h4>{person.name}</h4>：
- HTML <h4> 标题元素，使用 {person.name} 表达式将当前 person 对象的 name 属性值插入到标题中。
<p>{person.age} years old, {person.beltColour} belt.</p>：
- HTML <p> 段落元素，使用 {person.age} 和 {person.beltColour} 表达式将当前 person 对象的 age 和 beltColour 属性值插入到段落中。
{:else}：
- each 块的 else 分支，当 people 数组为空或未定义时，显示 else 分支中的内容。
<p> There are no people to show... </p>：
- 当 people 数组为空时，显示此段落文本，提示没有人可以显示。
{/each}：
- 结束 each 块。

代码总结

这个 Svelte 组件定义了一个 people 数组，并使用 each 块遍历该数组中的每个对象。在每次循环中，它会创建一个包含该对象信息的 <div> 元素。如果 people 数组为空或未定义，则显示一条消息，提示没有人可以显示。通过这种方式，组件能够动态生成和显示列表内容，展示了 Svelte 中循环和条件渲染的基本用法。

App.Svelte 完整代码：

<script>let people = [{ name: 'yoshi', beltColour: 'black', age: 25, id: 1 },{ name: 'mario', beltColour: 'orange', age: 45, id: 2 },{ name: 'luigi', beltColour: 'brown', age: 35, id: 3 }];
</script><main>{#each people as person (person.id)}<div><h4>{person.name}</h4><p>{person.age} years old, {person.beltColour} belt.</p></div>{:else}<p> There are no people to show... </p>{/each}
</main><style>main {text-align: center;padding: 1em;max-width: 240px;margin: 0 auto;} h1 {color: #ff3e00;text-transform: uppercase;font-size: 4em;font-weight: 100;}@media (min-width: 640px) {main {max-width: none;}}
</style>