Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

有时你事先不知道需要渲染哪个元素。而不是拥有一长串 {#if ...} 块……

¥Sometimes you don’t know in advance which element needs to be rendered. Rather than having a long list of {#if ...} blocks...

App
{#if selected === 'h1'}
	<h1>I'm a <code>&lt;h1&gt;</code> element</h1>
{:else}
	<p>TODO others</p>
{/if}

...我们可以使用 <svelte:element>

¥...we can use <svelte:element>:

App
<svelte:element this={selected}>
	I'm a <code>&lt;{selected}&gt;</code> element
</svelte:element>

this 值可以是任何字符串,也可以是假值 - 如果是假值,则不会渲染任何元素。

¥The this value can be any string, or a falsy value — if it’s falsy, no element is rendered.

上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
	const options = ['h1', 'h2', 'h3', 'p', 'marquee'];
	let selected = $state(options[0]);
</script>
 
<select bind:value={selected}>
	{#each options as option}
		<option value={option}>{option}</option>
	{/each}
</select>
 
{#if selected === 'h1'}
	<h1>I'm a <code>&lt;h1&gt;</code> element</h1>
{:else}
	<p>TODO others</p>
{/if}