Svelte 綁定

如何在 Svelte 中使用綁定 使用 Svelte,您可以在數據和 UI 之間創建雙向綁定。 許多其他 Web 框架可以提供雙向綁定,這是一種非常常見的模式。 在表單中特別有用。 bind:value 讓我們從您通常會使用的最常見的綁定方式開始,您可以使用 bind:value 來應用它。您從組件狀態中獲取一個變量,並將它綁定到表單字段上: <script> let name = '' </script> <input bind:value={name}> 現在,如果 name 變量發生變化,輸入字段將更新其值。反之亦然:如果用戶更新表單,則 name 變量的值也會更改。 請注意,該變量必須使用 let/var 關鍵字定義,而不能使用 const,否則它無法被 Svelte 更新,因為 const 定義了一個值無法重新分配的變量。 bind:value 可以用於所有類型的輸入字段(type="number",type="email" 等),但它也適用於其他類型的字段,比如 textarea 和 select(稍後會詳細介紹 select)。 複選框和單選按鈕 複選框和單選按鈕(input 元素的 type="checkbox" 或 type="radio")允許以下 3 種綁定方式: bind:checked bind:group bind:indeterminate bind:checked 允許我們將一個值綁定到元素的選中狀態: <script> let isChecked </script> <input type=checkbox bind:checked={isChecked}> bind:group 對複選框和單選按鈕很有用,因為這些按鈕通常以組的形式使用。使用 bind:group,您可以將一個 JavaScript 數組關聯到一組複選框上,並根據用戶的選擇自動填充它。 以下是一個示例。goodDogs 數組根據我勾選的複選框填充:...