(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>
元素,用于包裹组件的主要内容。
- HTML
-
{#if num > 10}
- Svelte 的条件语句起始部分,使用
{#if ...}
语法。 num > 10
:这是一个布尔表达式,用于判断num
是否大于10
。如果条件为true
,则执行其后的代码块。
- Svelte 的条件语句起始部分,使用
-
<p>Greater than 10</p>
:- HTML
<p>
段落元素。当num > 10
为true
时,这个段落元素将会被渲染,显示内容为 “Greater than 10”。
- HTML
-
{:else if num > 5}
- Svelte 的条件语句的
else if
分支,使用{:else if ...}
语法。 num > 5
:这是一个布尔表达式,用于判断num
是否大于5
。如果num > 10
为false
且num > 5
为true
,则执行其后的代码块。
- Svelte 的条件语句的
-
<p>Greater than 5</p>
:- HTML
<p>
段落元素。当num > 5
为true
且num <= 10
时,这个段落元素将会被渲染,显示内容为 “Greater than 5”。
- HTML
-
{:else}
- Svelte 的条件语句的
else
分支,使用{:else}
语法。如果前面的所有条件都为false
,则执行其后的代码块。
- Svelte 的条件语句的
-
<p>less than 5</p>
:- HTML
<p>
段落元素。当num <= 5
时,这个段落元素将会被渲染,显示内容为 “less than 5”。
- HTML
-
{/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}
分支将不会被执行。
- 如果
num
的值被改变,重新评估条件语句,并根据新的值动态更新 DOM,显示对应的段落内容。
总结
通过使用 Svelte 的条件语句 {#if ...}{:else if ...}{:else}{/if}
,可以根据变量 num
的值动态显示不同的内容。这种机制使得在应用程序中处理不同的状态和情况变得非常简便和直观。
Components 调用流程
什么是 Components
Components(组件) 是用户界面中的独立、可重用的部分,它们可以组合在一起构建复杂的应用程序。每个组件封装了自己的逻辑、模板和样式,便于管理和复用。在 Svelte 中,组件是通过 .svelte
文件定义的,这些文件包含了组件的逻辑(JavaScript)、模板(HTML)和样式(CSS)。
逐行解释代码
我们将逐行解释示例代码,包括每个参数和背后的含义。
App.svelte
<script>import Modal from './Modal.svelte';
</script><Modal /><main></main>
-
<script>
:- 该标签用于编写 JavaScript 代码,包含组件的逻辑部分。
-
import Modal from './Modal.svelte';
:- 这行代码从当前目录导入了名为
Modal
的组件。Modal.svelte
是一个独立的 Svelte 组件文件,通过import
语法将其引入到当前组件中。
- 这行代码从当前目录导入了名为
-
<Modal />
:- 这是一个自定义组件的实例,用于在
App.svelte
组件中嵌入和显示Modal
组件。使用自闭合标签<Modal />
来表示组件实例。
- 这是一个自定义组件的实例,用于在
-
<main>
:- HTML
<main>
元素,用于包裹应用的主要内容。在这个示例中,<main>
元素是空的,但通常用于包含应用的核心内容。
- HTML
Modal.svelte
<script>let showModal = true;
</script>{#if showModal}<div class="backdrop"><div class="modal"><p>Sign up for offers!</p></div></div>
{/if}<style></style>
-
<script>
:- 该标签用于编写 JavaScript 代码,包含组件的逻辑部分。
-
let showModal = true;
:- 声明一个名为
showModal
的变量,并将其初始值设置为true
。该变量用于控制模态框的显示状态。
- 声明一个名为
-
{#if showModal} ... {/if}
:- Svelte 的条件语句块,用于根据
showModal
变量的值动态显示或隐藏内容。当showModal
为true
时,条件块内的内容将被渲染;当showModal
为false
时,条件块内的内容将被移除。
- Svelte 的条件语句块,用于根据
-
<div class="backdrop">
:- HTML
<div>
元素,具有backdrop
类,用于定义模态框的背景。
- HTML
-
<div class="modal">
:- HTML
<div>
元素,具有modal
类,用于定义模态框的内容区域。
- HTML
-
<p>Sign up for offers!</p>
:- HTML
<p>
段落元素,包含模态框的提示文本 “Sign up for offers!”。
- HTML
-
<style>
:- 该标签用于编写组件的样式部分。在这个示例中,样式部分是空的,但通常用于定义组件的 CSS 样式。
代码逻辑和执行过程
- App.svelte:
- 引入并实例化
Modal
组件,显示Modal
组件的内容。 - 主体部分
<main>
可以包含更多内容和其他组件。
- Modal.svelte:
- 声明
showModal
变量并设置为true
。 - 使用条件语句
{#if showModal}
判断是否显示模态框内容。 - 如果
showModal
为true
,则渲染模态框背景和内容。
代码总结
这个示例展示了如何在 Svelte 中创建和使用组件。通过 import
语法引入 Modal
组件,并在 App.svelte
中实例化和使用它。条件语句块 {#if showModal}
控制模态框的显示状态,使得组件能够根据应用状态动态更新内容。这样可以实现组件的复用和独立管理,提升代码的可维护性和扩展性。