问题描述
在 Svelte 中,应如何根据组件状态更改元素上的类?
In Svelte, how should classes be changed on elements depending upon component state?
例如,您可能希望在特定条件下将类应用于按钮,如下例所示.
For instance, you may wish to apply a class to a button under certain conditions, as in the following example.
<button class="{{class}}">
现在,这可以通过创建一个返回类名的计算属性来实现,或空字符串,在某些条件下.
Right now, this can be achieved by creating a computed property which would return class names, or empty strings, under certain conditions.
但是,我担心这是否会污染计算属性命名空间.例如,如果有一个 status
,可能需要同时设置一个动态文本,如 statusMessage
,和一个类,如 statusClass
.
However, I am concerned over whether this might be polluting the computed properties namespace. For instance, if there were a status
, it might be desired to both set a dynamic text, like statusMessage
, and a class, like statusClass
.
有没有更好的方法来做到这一点,或者计算属性是要走的路?是否计划为 Svelte 提供更明确的 CSS 支持?
Is there a better way to do this, or are computed properties the way to go? Is any more explicit support for CSS planned for Svelte?
推荐答案
您可以使用内联表达式,如下所示:
You can use an inline expression, like so:
<button class='{{active ? "active": "inactive"}}'>
{{active ? 'Selected' : 'Select this'}}
</button>
这通常比使用计算属性要好,因为只需查看模板就可以立即清楚可能的值是什么.
That's generally better than using a computed property, because it's immediately clear what the possible values are just by looking at the template.
您也可以使用辅助函数,如果表达式会变得笨拙——在某些情况下,您可能更喜欢使用辅助函数而不是计算值:
You can also use helper functions, if the expression would become unwieldy — in some situations you might prefer these to computed values:
<button class='{{getClass(status)}}'>{{getText(status)}}</button>
<script>
export default {
helpers: {
getClass(status) {
// ...
},
getText(status) {
// ...
}
}
};
</script>
这篇关于Svelte 是否有助于动态 CSS 样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!