（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>