（6）svelte 教程： Conditionals（判断）和# Components（组件）

原创

于 2024-06-03 09:58:12 发布 · 1.1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#svelte

（6）svelte 教程： Conditionals（判断）和# Components（组件）

什么是 Conditionals

Conditionals（条件语句） 是编程中的一种控制结构，用于根据特定条件执行不同的代码块。在 Svelte 中，条件语句可以使用 {#if ...}{:else if ...}{:else}{/if} 块来实现，根据条件动态显示或隐藏某些内容。

逐行解释代码

以下是示例代码的详细逐行解释，包括每个参数和背后的含义：

<script>
    let num = 15;
</script>

<main>
  {#if num > 10}
    <p>Greater than 10</p>
  {:else if num > 5}
    <p>Greater than 5</p>
  {:else}
    <p>less than 5</p>
  {/if}
</main>

let num = 15;
- 声明一个名为 num 的变量，并将其初始值设置为 15。这是一个简单的数字变量，用于后续的条件判断。

部分

<main>：
- HTML <main> 元素，用于包裹组件的主要内容。
{#if num > 10}
- Svelte 的条件语句起始部分，使用 {#if ...} 语法。
- num > 10：这是一个布尔表达式，用于判断 num 是否大于 10。如果条件为 true，则执行其后的代码块。
<p>Greater than 10</p>：
- HTML <p> 段落元素。当 num > 10 为 true 时，这个段落元素将会被渲染，显示内容为 “Greater than 10”。
{:else if num > 5}
- Svelte 的条件语句的 else if 分支，使用 {:else if ...} 语法。
- num > 5：这是一个布尔表达式，用于判断 num 是否大于 5。如果 num > 10 为 false 且 num > 5 为 true，则执行其后的代码块。
<p>Greater than 5</p>：
- HTML <p> 段落元素。当 num > 5 为 true 且 num <= 10 时，这个段落元素将会被渲染，显示内容为 “Greater than 5”。
{:else}
- Svelte 的条件语句的 else 分支，使用 {:else} 语法。如果前面的所有条件都为 false，则执行其后的代码块。
<p>less than 5</p>：
- HTML <p> 段落元素。当 num <= 5 时，这个段落元素将会被渲染，显示内容为 “less than 5”。
{/if}
- 结束 Svelte 的条件语句块。

代码逻辑和执行过程

初始化变量 num，值为 15。
进入 <main> 标签内的内容。
进行条件判断：

首先判断 num > 10 是否为 true。由于 num 的值为 15，条件 num > 10 为 true，因此渲染 <p>Greater than 10</p>。
由于 num > 10 条件已经为 true 并执行了相应的代码块，后续的 {:else if num > 5} 和 {:else} 分支将不会被执行。