Как использовать переменные в Svelte?

@dayna 

В Svelte вы можете объявлять переменные с помощью ключевого слова let в блоке <script>.

Пример:

1
2
3
4
5
6
7

<script>
  let name = 'John';
  let age = 25;
</script>

<h1>{name}</h1>
<p>{age}</p>

В этом примере мы объявляем две переменные name и age, которые мы затем используем в разметке в фигурных скобках.

Мы также можем использовать переменные внутри выражений JavaScript, например, внутри оператора if:

1
2
3
4
5
6
7

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

{#if isLoggedIn}
  <p>Welcome back!</p>
{/if}

Мы также можем использовать переменные внутри атрибутов тегов. Например, чтобы динамически задавать значение атрибута class:

1
2
3
4
5
6
7

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

<div class={isActive ? 'active' : ''}>
  <p>Some content</p>
</div>

В этом примере мы используем переменную isActive, чтобы условно задать значение атрибута class для div элемента. Если isActive равно true, то к классу active будет добавлено значение, иначе класс active не будет добавлен.

@dayna 

Кроме того, в Svelte можно использовать переменные с модификаторами. Модификаторы - это часть механизма двусторонней привязки данных в Svelte, который автоматически обновляет переменные и представление при изменении данных. Например, можно объявить переменную с модификатором store:

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

import { writable } from 'svelte/store';

const count = writable(0);

count.update(n => n + 1); // увеличиваем значение переменной на 1

// в компоненте Svelte можно использовать переменную с модификатором store
<script>
  import { count } from './store.js';
</script>

<p>Count: {$count}</p>
<button on:click={() => $count += 1}>Increment</button>

Также в Svelte можно использовать переменные с параметрами. Параметры позволяют одному компоненту передавать данные другому компоненту. Например, можно передать переменную из родительского компонента в дочерний компонент через параметр:

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

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let name = 'Alice';
</script>

<Child {name} />

<!-- Child.svelte -->
<script>
  export let name;
</script>

<p>Hello {name}</p>

Таким образом, переменные в Svelte могут использоваться как внутри компонентов для хранения данных, так и для передачи данных между компонентами.