svelte - Svelte 是否有助于动态 CSS 样式？

Question

在 Svelte 中，应如何根据组件状态更改元素上的类？

例如，您可能希望在特定条件下将类应用于按钮，如下例所示。

<button class="{{class}}">

现在，这可以通过创建 computed property 来实现。在某些条件下，它将返回类名或空字符串。

但是，我担心这是否会污染计算属性命名空间。例如，如果有一个 status ，可能需要同时设置动态文本，例如 statusMessage ，还有一个类，比如 statusClass .

有没有更好的方法来做到这一点，或者计算属性是要走的路？是否计划为 Svelte 提供更明确的 CSS 支持？

Answer 1

您可以使用内联表达式，如下所示:

<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>