Svelte教程翻译（十二、Classes）

与任何其他属性一样，可以使用JavaScript属性指定class，如下所示：

<button
	class="{current === 'foo' ? 'selected' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

这是UI开发中的常见模式，因此Svelte包含了一个特殊的指令来简化它：

<button
	class:selected="{current === 'foo'}"
	on:click="{() => current = 'foo'}"
>foo</button>

只要表达式的值是真的，selected样式名就会被添加到元素中，如果是假的，就会被删除。

语法糖

通常，类的名称与它所依赖的值的名称相同：

<div class:big={big}>
	<!-- ... -->
</div>

在这些情况下，我们可以使用速记形式：

<div class:big>
	<!-- ... -->
</div>

推荐去官网体验一下。classes