有時候你無法事先知道需要渲染哪個元素。與其使用一長串的 {#if ...} 區塊...
App
{#if selected === 'h1'}
<h1>I'm a <code><h1></code> element</h1>
{:else}
<p>TODO others</p>
{/if}...我們可以使用 <svelte:element>
App
<svelte:element this={selected}>
I'm a <code><{selected}></code> element
</svelte:element>this 的值可以是任何字串，或是虛值 — 如果是虛值，則不會渲染任何元素。
上一頁 下一頁
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><h1></code> element</h1>
{:else}<p>TODO others</p>
{/if}