Svelte学习笔记五----列表渲染+异步渲染

列表循环渲染

使用 {#each items as item}{/each} 来实现列表循环渲染，这里的item可以通过解构赋值，拿到item里面的值，例如 {#each items as {name, age}} {/each}

• 一个简单的例子

<script>
    let people = [
        {name: "Mike", age: 18, math: 90},
        {name: "Jack", age: 20, math: 100},
        {name: "Cathy", age: 19, math: 85}
    ];
</script>

<table>
<thead>
    <th>姓名</th>
    <th>年龄</th>
    <th>分数</th>
</thead>
<tbody>
{#each people as p}
     <!-- content here -->
     <tr>
        <td>{p.name}</td>
        <td>{p.age}</td>
        <td>{p.math}</td>
      </tr>
{/each}
</tbody>
</table>

• 效果