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

Пользователь

от dayna , в категории: JavaScript , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от brenna , 5 месяцев назад

@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 не будет добавлен.