其他分享
首页 > 其他分享> > Svelte 模板中条件渲染写法

Svelte 模板中条件渲染写法

作者:互联网

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 参考

标签:JSX,counter,else,increment,Svelte,写法,模板
来源: https://www.cnblogs.com/aisowe/p/15245502.html