ARTICLE · 1204903
在 Svelte 模板中渲染逻辑
在 Svelte 模板中渲染逻辑在 Svelte 中渲染变量，使用大括号 {} 插值。 
要在模板中渲染条件语句，使用 if 语句块，它的语法如下： 
举个例子： 
有 if 的地方必有 else，它俩就像卧龙凤雏。else 块的语法如下： 
举例如下： 
在 Svelte 语句块中，有三种类型：一种是 {#...} 开启语句块，一种是 {/...} 结束语句块，一种是 {:...} 继续当前语句块。正如上方的 {#if}, {:else}, {/if} 所示。 如果条件较多，可以使用 else if 语句块。 
如果要渲染列表，使用 each 语句块。语法如下： 
比如： 
如果想访问元素在列表中的位置索引，在 as 后面使用第二个参数： 
在 React 和 Vue 渲染列表时，为了正确识别每个元素，需要强制为每一个元素提供唯一的 key 值。如果不给，编译器会通过警告骚扰你。 Svelte 的 key 默认不是强制的。当你改变列表长度时，它会在列表尾部增加或删除元素，并原地修改已有元素的值。 如果列表纯展示用，无状态，这就够了，不需要 key。 但是，如果列表元素有内部状态，或者需要排序，就需要通过 key 唯一标识每一个元素。 Svelte 在 as 后面用小括号 () 标识唯一键的取值。 
Svelte 还有一种专门处理异步操作 Await 块。它的参数是 promise 实例，可以根据 promise 的状态，渲染不同的界面。 Await 块的语法如下： 
未完待续
