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

本文主要是介绍（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>

这篇关于（4）svelte 教程：Loops（循环）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---