Svelte类指令

Svelte 类指令

与任何其他属性一样,您可以使用 JavaScript 属性指定类,如下所示:<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 类就会添加到元素中,如果为假,则将其删除。App.svelte<script>

let current = 'foo';

</script>

<style>

button {

display: block;

}

.selected {

background-color: #ff3e00;

color: white;

}

</style>

<button

class:selected="{current === 'foo'}"

on:click="{() => current = 'foo'}"

>foo</button>

<button

class:selected="{current === 'bar'}"

on:click="{() => current = 'bar'}"

>bar</button>

<button

class:selected="{current === 'baz'}"

on:click="{() => current = 'baz'}"

>baz</button>