Svelte基础
Svelte高阶
上下文API
特殊元素
接下来
SvelteKit基础
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
有时候,有时候,你并不指定具体要渲染哪个元素, 与其写个长长的{#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><h1></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><{selected}></code> element
</svelte:element>
this
的值可以是任意的字符串,如果是个false
那就不渲染了。
The
this
value can be any string, or a falsy value — if it’s falsy, no element is rendered.
previous next
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}