class
在元素上设置类名有两种方式：class 属性和 class: 指令。
属性
原始值的处理方式与其他属性相同：
<div class={large ? 'large' : 'small'}>...</div>由于历史原因，假值（如
false和NaN）会被转换为字符串（class="false"），但class={undefined}（或null）会导致属性被完全省略。在 Svelte 的未来版本中，所有假值都将导致class被省略。
对象和数组
从 Svelte 5.16 开始，class 可以是对象或数组，并使用 clsx 转换为字符串。
如果值是一个对象，则会添加真值的键：
<script>
let { cool } = $props();
</script>
<!-- 如果 `cool` 为真则结果为 `class="cool"`，
否则为 `class="lame"` -->
<div class={{ cool, lame: !cool }}>...</div>如果值是一个数组，真值会被合并：
<!-- 如果 `faded` 和 `large` 都为真，结果为
`class="saturate-0 opacity-50 scale-200"` -->
<div class={[faded && 'saturate-0 opacity-50', large && 'scale-200']}>...</div>注意，无论我们使用数组还是对象形式，我们都可以用一个条件同时设置多个类，这在使用 Tailwind 等工具时特别有用。
数组可以包含数组和对象，clsx 会将它们展平。这对于合并本地类和 props 特别有用，例如：
Button
<script>
let props = $props();
</script>
<button {...props} class={['cool-button', props.class]}>
{@render props.children?.()}
</button><script lang="ts">
let props = $props();
</script>
<button {...props} class={['cool-button', props.class]}>
{@render props.children?.()}
</button>该组件的用户可以灵活地混合使用对象、数组和字符串：
App
<script>
import Button from './Button.svelte';
let useTailwind = $state(false);
</script>
<Button
onclick={() => useTailwind = true}
class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
接受 Tailwind 的必然性
</Button><script lang="ts">
import Button from './Button.svelte';
let useTailwind = $state(false);
</script>
<Button
onclick={() => useTailwind = true}
class={{ 'bg-blue-700 sm:w-1/2': useTailwind }}
>
接受 Tailwind 的必然性
</Button>class: 指令
在 Svelte 5.16 之前，class: 指令是在元素上条件设置类的最便捷方式。
<!-- 这两种写法是等效的 -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>与其他指令一样，当类名与值相同时，我们可以使用简写形式：
<div class:cool class:lame={!cool}>...</div>除非你使用的是较旧版本的 Svelte，否则建议避免使用
class:，因为属性形式更强大且更易于组合。