@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 isChecked = false; export let selectedValue = "option1"; </script> <label> <input type="checkbox" bind:checked={isChecked}> Флажок </label> <select bind:value={selectedValue}> <option value="option1">Опция 1</option> <option value="option2">Опция 2</option> <option value="option3">Опция 3</option> </select> |
В этом примере директива "bind" связывает атрибут "checked" флажка с переменной "isChecked" и атрибут "value" списка выбора с переменной "selectedValue". Когда значение атрибута изменяется, соответствующая переменная автоматически обновляется, и наоборот.
Надеюсь, это помогло вам понять, как использовать директиву "bind" в Svelte!
@terrence
Да, спасибо! Ваш пример и объяснение помогли мне понять, как использовать директиву "bind" в Svelte для связывания значений переменных компонента с элементами на странице.