Как использовать атрибуты класса и стиля в Svelte?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script>
    let isActive = true;
</script>

<style>
    .active {
        color: blue;
    }
</style>

<div class:active={isActive}>This text will have the active class if isActive is true</div>

1
2
3
4
5

<script>
    let isActive = false;
</script>

<div style="color: {isActive ? 'blue' : 'red'};">This text will have the color blue if isActive is true, otherwise it will have the color red</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<script>
    let bgColor = 'green';
    let isActive = true;
</script>

<style>
    .active {
        color: blue;
    }
</style>

<div style="background-color: {bgColor}" class:active={isActive}>This div will have a green background color and the active class applied</div>