在 Svelte 中，应如何根据组件状态更改元素上的类？
例如，您可能希望在某些条件下将类应用于按钮，如下例所示。
<button class="{{class}}">
目前，这可以通过创建一个computed property 来实现，该computed property 在某些条件下会返回类名或空字符串。
但是，我担心这是否会污染计算属性名称空间。例如，如果有一个status，可能需要同时设置一个动态文本，如statusMessage，和一个类，如statusClass。
有没有更好的方法来做到这一点，或者计算属性是要走的路？是否计划为 Svelte 提供更明确的 CSS 支持？
【问题讨论】：
标签： svelte
您可以使用内联表达式，如下所示：
<button class='{{active ? "active": "inactive"}}'>
{{active ? 'Selected' : 'Select this'}}
</button>
这通常比使用计算属性要好，因为只需查看模板就可以立即清楚可能的值是什么。
如果表达式变得笨拙，您也可以使用辅助函数——在某些情况下，您可能更喜欢这些函数而不是计算值：
<button class='{{getClass(status)}}'>{{getText(status)}}</button>
<script>
export default {
helpers: {
getClass(status) {
// ...
},
getText(status) {
// ...
}
}
};
</script>
【讨论】：
<button class='{active ? "active": "inactive"}'>（少了一个括号，万岁！）
<button class={`${active ? "active": "inactive"}`}>
今天你可以使用：
export let whitetext = false;
<div class:whitetext></div>
然后
<MyComponent whitetext={true} />
简单的基于真/假的类的语法。
【讨论】：
<div class:whitetext class:issponsored class:offset></div>
对于其他流行的框架，没有内置的使用方式，例如，class= 内部的条件 {#if}。
因为一旦你有两个以上的类，内联表达式就会变得笨拙，在这种情况下我会直接使用助手。类构建器助手的快速示例：
helpers: {
getSlideClasses(index, currentIndex) {
let classes = ['js_slide']
if ( index === currentIndex ) {
classes.push('selected')
}
if ( index === 0 ) {
classes.push('first')
}
return classes.join(' ')
}
}
然后：
<div class='{ getSlideClasses(index, currentIndex)}'>
【讨论】：
根据教程是：
<div class:active="{current === 'foo'}">
如果条件返回 true，则添加 active 类。
【讨论】：
来自文档：https://svelte.dev/tutorial/classes
<script>
let current = 'foo';
</script>
<style>a
button {
display: block;
}
.active {
background-color: #ff3e00;
color: white;
}
</style>
<button
class="{current === 'foo' ? 'active' : ''}"
on:click="{() => current = 'foo'}"
>foo</button>
<button
class="{current === 'bar' ? 'active' : ''}"
on:click="{() => current = 'bar'}"
>bar</button>
<button
class="{current === 'baz' ? 'active' : ''}"
on:click="{() => current = 'baz'}"
>baz</button>
【讨论】：