Svelte 模板中条件渲染写法

2023-10-16 08:33:46

1 前言

模板写法不同于 JSX，JSX 可以用 JS 的条件控制语句，而模板需要单独设计条件控制语法，比如 Vue 中使用 v-if

2 正文

<script>
  let counter = 0;
  const increment = () => {
    counter++;
  };
</script>

<button on:click={increment}>increment</button>

{#if counter === 0}
  <strong>0</strong>
{:else if counter === 1}
  <strong>1</strong>
{:else}
  <strong>> 1</strong>
{/if}

这些都是独有的语法，分为三组记忆：{#if conditions}、{:else if}、{/if}

3 总结

Svelte 中的条件渲染逻辑是单独抽成了一行，相较于 Vue 直接写在标签内，Svelte 的设计更能保持标签的纯粹，看起来更加美观一些

4 参考

https://www.sveltejs.cn/tutorial/if-blocks

Svelte 模板中条件渲染写法