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>

Answer 2

对于其他流行的框架，没有内置的使用方式，例如{#if}中的条件class=。

由于一旦您拥有两个以上的类，内联表达式将变得很笨拙，因此在这种情况下，我会直接帮助助手。类构建器助手的快速示例：

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)}'>

Answer 3

今天您可以使用：

export let whitetext = false;
<div class:whitetext></div>

然后

<MyComponent whitetext={true} />

简单的基于true / false的类的语法。

Answer 4

根据本教程的内容：

class

如果条件返回true，则添加<div class:active="{current === 'foo'}">类。

请参阅：https://svelte.dev/tutorial/classes

Answer 5

从文档中：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>

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

5 个答案: