有两种方式为元素设置类：元素的 `class` 属性，以及 `class:` 指令。

## 
属性

原始值被当作任何其他属性来处理：

```svelte
<div class={large ? 'large' : 'small'}>...</div>
```

> \[!注意\] 由于历史原因，假值（如`false`和`NaN`）会被转换为字符串（`class="false"`），尽管`class={undefined}`（或`null`）会导致属性完全省略。在 Svelte 的下一个版本中，所有假值都将导致`class`属性被省略。

### 
对象和数组

自 Svelte 5.16 起，`class`可以是对象或数组，并使用[clsx](https://github.com/lukeed/clsx)转换为字符串。

如果值是对象，则添加真值键：

```svelte
<script>
	let { cool } = $props();
</script>

<!-- results in `class="cool"` if `cool` is truthy,
     `class="lame"` otherwise -->
<div class={{ cool, lame: !cool }}>...</div>
```

如果值是数组，则将真值合并：

```svelte
<!-- 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 结合很有用，例如：

```svelte
<!--- file: Button.svelte --->
<script>
	let props = $props();
</script>

<button {...props} class={['cool-button', props.class]}>
	{@render props.children?.()}
</button>
```

该组件的用户可以使用对象、数组和字符串的混合：

```svelte
<!--- file: App.svelte --->
<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>
```

Svelte 还暴露了 `ClassValue` 类型，这是元素上 `class` 属性接受的类型。如果您想在组件属性中使用类型安全的类名，这将很有用：

```svelte
<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:`指令是设置元素条件类最方便的方式。

```svelte
<!-- These are equivalent -->
<div class={{ cool, lame: !cool }}>...</div>
<div class:cool={cool} class:lame={!cool}>...</div>
```

与其它指令一样，当类名与值相同时，我们可以使用缩写：

```svelte
<div class:cool class:lame={!cool}>...</div>
```

> \[注意\] 除非您正在使用较旧的 Svelte 版本，否则请考虑避免使用`class:`，因为该属性更强大且可组合。