Svelte 的模板逻辑：赋予 UI 表达力的利器

2023-11-22 11:23:39

在现代 UI 框架中，组件是构建用户界面的基石。除了脚本之外，组件的另一个关键方面是 UI。然而，用于 UI 的 HTML 本身无法表达逻辑，这限制了 UI 的动态性和响应性。

为了解决这个问题，Svelte 引入了模板逻辑的概念，为模板添加了对逻辑表达的支持。通过这种方式，Svelte 赋予 UI 强大的能力，使其能够响应数据变化并执行复杂的操作。

判断：条件渲染

判断是 Svelte 模板逻辑的关键部分。它们允许我们根据条件渲染或隐藏特定部分的 UI。

例如，以下代码片段使用 {#if} 块根据 isVisible 状态有条件地渲染一个按钮：

{#if isVisible}
  <button>点击我</button>
{/if}

遍历：动态列表

遍历是另一个强大的模板逻辑功能，它使我们能够基于数组或对象动态创建列表。

例如，以下代码片段使用 {#each} 块遍历 items 数组并为每个项目渲染一个 <li> 元素：

{#each items as item}
  <li>{item}</li>
{/each}

事件处理：响应用户交互

事件处理对于构建交互式 UI 至关重要。Svelte 提供了一种简洁的方式来处理事件，使用 on 指令。

例如，以下代码片段使用 on:click 指令为按钮添加一个点击事件处理程序：

<button on:click={handleClick}>点击我</button>

示例：构建一个可折叠面板

为了展示 Svelte 模板逻辑的强大功能，让我们创建一个可折叠面板的组件。

<script>
  export let title;
  export let content;
</script>

<div class="panel">
  <div class="panel-header">
    <button on:click={() => show = !show}>
      {title}
    </button>
  </div>

  {#if show}
    <div class="panel-content">
      {content}
    </div>
  {/if}
</div>