面试题：Svelte HTML模板中的条件渲染与循环

Question

假设你有一个数组，数组元素是包含 'name' 和 'age' 属性的对象。在Svelte的HTML模板中，如何使用条件渲染，仅显示年龄大于18岁的人的名字，同时用循环将这些名字以无序列表的形式展示出来？请写出具体的Svelte代码。

Answer 1

<script>
    const people = [
        { name: 'Alice', age: 20 },
        { name: 'Bob', age: 15 },
        { name: 'Charlie', age: 25 }
    ];
</script>

<ul>
    {#each people as person}
        {#if person.age > 18}
            <li>{person.name}</li>
        {/if}
    {/each}
</ul>