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>
<!-- results in `class="cool"` if `cool` is truthy,
`class="lame"` otherwise -->
<div class={{ cool, lame: !cool }}>...</div>如果值是数组，则将真值合并：
<!-- if `faded` and `large` are both truthy, results in
`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 }}
>
Accept the inevitability of 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 }}
>
Accept the inevitability of Tailwind
</Button>Svelte 还暴露了 ClassValue 类型，这是元素上 class 属性接受的类型。如果您想在组件属性中使用类型安全的类名，这将很有用：
<script lang="ts">
import type { ClassValue } from 'svelte/elements';
const props: { class: ClassValue } = $props();
</script>
<div class={['original', props.class]}>...</div>The class: directive
在 Svelte 5.16 之前，class:指令是设置元素条件类最方便的方式。
<!-- These are equivalent -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>与其它指令一样，当类名与值相同时，我们可以使用缩写：
<div class:cool class:lame={!cool}>...</div>[注意] 除非您正在使用较旧的 Svelte 版本，否则请考虑避免使用
class:，因为该属性更强大且可组合。