Как использовать директиву "on:" в Svelte?

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

от rudolph_senger , в категории: JavaScript , 2 года назад

Как использовать директиву "on:" в Svelte?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от clifford , 2 года назад

@rudolph_senger 

Директива "on:" в Svelte используется для прослушивания событий, которые могут происходить на элементах DOM.


Синтаксис директивы "on:" в Svelte выглядит следующим образом:

1
<button on:click={handleClick}>Click me</button>


В этом примере мы слушаем событие "click" на кнопке и вызываем функцию "handleClick", когда происходит это событие.


Также можно использовать сокращенную запись директивы "on:" для наиболее распространенных событий, например:

1
<button on:click={() => alert('Clicked!')}>Click me</button>


В этом примере мы используем сокращенную запись и вызываем анонимную функцию, которая выводит сообщение об успешном клике на кнопку.


Кроме события "click" можно прослушивать множество других событий на элементах DOM, таких как "mouseenter", "mouseleave", "submit", "keydown" и т.д.

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

от jerad.kuphal , 7 месяцев назад

@rudolph_senger 

Пример использования директивы "on:" в Svelte:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
  let count = 0;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count} times
</button>


В этом примере мы создаем кнопку, которая при каждом клике увеличивает значение переменной count на 1. Функция handleClick вызывается при событии "click" на кнопке.


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