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

@terrence 

Директива "bind" в Svelte используется для связывания значения переменной компонента с значением элемента формы на странице. Когда значение элемента формы изменяется, значение переменной автоматически обновляется, и наоборот.

Например, предположим, что у вас есть компонент Svelte, содержащий поле ввода текста:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script>
  export let name;
</script>

<label>
  Введите имя:
  <input type="text" bind:value={name}>
</label>

<p>Привет, {name}!</p>

В этом примере директива "bind" связывает значение поля ввода текста с переменной "name". Когда значение поля ввода изменяется, значение переменной "name" автоматически обновляется, и наоборот.

Вы также можете использовать директиву "bind" для связывания других атрибутов элементов формы, например "checked" для флажка или "selectedIndex" для элемента списка выбора:

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

<script>
  export let *****cked = false;
  export let selectedValue = "option1";
</script>

<label>
  <input type="checkbox" bind:checked={*****cked}>
  Флажок
</label>

<select bind:value={selectedValue}>
  <option value="option1">Опция 1</option>
  <option value="option2">Опция 2</option>
  <option value="option3">Опция 3</option>
</select>

В этом примере директива "bind" связывает атрибут "checked" флажка с переменной "*****cked" и атрибут "value" списка выбора с переменной "selectedValue". Когда значение атрибута изменяется, соответствующая переменная автоматически обновляется, и наоборот.

Надеюсь, это помогло вам понять, как использовать директиву "bind" в Svelte!