基本标记

在 GitHub 上编辑此页面

标签永久链接

小写标签，如 <div>，表示常规 HTML 元素。大写标签，如 <Widget> 或 <Namespace.Widget>，表示组件。

<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget />
</div>

属性和道具永久链接

默认情况下，属性与 HTML 对应属性完全相同。

<div class="foo">
	<button disabled>can't touch this</button>
</div>

与 HTML 中一样，值可以不加引号。

<input type=checkbox />

属性值可以包含 JavaScript 表达式。

<a href="page/{p}">page {p}</a>

或者它们可以是 JavaScript 表达式。

<button disabled={!clickable}>...</button>

如果布尔属性的值为 真值，则将其包含在元素中，如果为 假值，则将其排除在外。

所有其他属性都将包含在内，除非其值为 空值（null 或 undefined）。

<input required={false} placeholder="This input field is not required" />
<div title={null}>This div has no title attribute</div>

表达式可能包含会导致常规 HTML 中语法高亮失败的字符，因此允许引用该值。引用不会影响值的解析方式

<button disabled="{number !== 42}">...</button>

当属性名称和值匹配（name={name}）时，它们可以用 {name} 替换。

<button {disabled}>...</button>
<!-- equivalent to
<button disabled={disabled}>...</button>
-->

根据惯例，传递给组件的值称为属性或道具，而不是 DOM 的特性属性。

与元素一样，name={name} 可以用 {name} 简写替换。

<Widget foo={bar} answer={42} text="hello" />

展开属性允许一次将许多属性或属性传递给元素或组件。

一个元素或组件可以有多个展开属性，穿插在常规属性中。

<Widget {...things} />

$$props 引用传递给组件的所有属性，包括未用 export 声明的属性。使用 $$props 的性能不如引用特定属性，因为对任何属性的更改都会导致 Svelte 重新检查 $$props 的所有用法。但在某些情况下它可能很有用——例如，在编译时不知道可能传递给组件哪些属性时。

<Widget {...$$props} />

$$restProps 仅包含未用 export 声明的属性。它可用于将其他未知属性传递给组件中的元素。与特定属性访问相比，它具有相同的性能特征，如 $$props。

<input {...$$restProps} />

在使用 bind:group 或 bind:checked 时，input 元素或其子 option 元素的 value 属性不能使用展开属性设置。在这些情况下，Svelte 需要能够在标记中直接看到元素的 value，以便将其链接到绑定的变量。

有时，属性顺序很重要，因为 Svelte 按顺序在 JavaScript 中设置属性。例如，<input type="range" min="0" max="1" value={0.5} step="0.1"/>，Svelte 将尝试将值设置为 1（从 0.5 四舍五入，因为默认步长为 1），然后将步长设置为 0.1。要解决此问题，请将其更改为 <input type="range" min="0" max="1" step="0.1" value={0.5}/>。

另一个示例是 <img src="..." loading="lazy" />。Svelte 将在使 img 元素 loading="lazy" 之前设置 img src，这可能太晚了。将其更改为 <img loading="lazy" src="..."> 以使图像延迟加载。

文本表达式永久链接

可以通过用大括号括起来将 JavaScript 表达式包含为文本。

{expression}

可以通过使用其 HTML 实体 字符串在 Svelte 模板中包含大括号：{、{ 或 { 表示 {，}、} 或 } 表示 }。

如果你正在使用正则表达式 (RegExp) 文字表示法，你需要用括号将其括起来。

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

注释永久链接

你可以在组件中使用 HTML 注释。

<!-- this is a comment! --><h1>Hello world</h1>

以 svelte-ignore 开头的注释会禁用下一块标记的警告。通常，这些是无障碍性警告；确保你有充分的理由禁用它们。

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus />