特殊标签

在 GitHub 上编辑此页面

{@html ...}永久链接

{@html expression}

在文本表达式中，< 和 > 等字符被转义；但是，在 HTML 表达式中，它们不会被转义。

表达式应为独立的有效 HTML — {@html "<div>"}content{@html "</div>"} 将不会起作用，因为 </div> 不是有效的 HTML。它也不会编译 Svelte 代码。

Svelte 在注入 HTML 之前不会清除表达式。如果数据来自不受信任的来源，则必须清除数据，否则会使你的用户面临 XSS 漏洞风险。

<div class="blog-post">
	<h1>{post.title}</h1>
	{@html post.content}
</div>

{@debug ...}永久链接

{@debug}

{@debug var1, var2, ..., varN}

{@debug ...} 标记提供了一个替代 console.log(...) 的选择。它会在特定变量发生变化时记录其值，并在您打开开发者工具时暂停代码执行。

<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

{@debug ...} 接受一个以逗号分隔的变量名列表（而不是任意表达式）。

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

没有参数的 {@debug} 标记将插入一个 debugger 语句，该语句在任何状态发生变化时触发，而不是指定的变量。

{@const ...}永久链接

{@const assignment}

{@const ...} 标记定义一个局部常量。

<script>
	export let boxes;
</script>

{#each boxes as box}
	{@const area = box.width * box.height}
	{box.width} * {box.height} = {area}
{/each}

{@const} 仅允许作为 {#if}、{:else if}、{:else}、{#each}、{:then}、{:catch}、<Component /> 或 <svelte:fragment /> 的直接子项。