Co robi bind:value w Svelte?

Jednokierunkowo przekazuje wartość do inputa

Kurs Svelte i SvelteKit · Moduł 5: Wiązania

Bifröst - Wiązania danych

2 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji4

Witaj na Bifröst - tęczowym moście łączącym światy! Bindings w Svelte łączą dane z elementami DOM tak jak Bifröst łączy Asgard z Midgardem - dwukierunkowo!

Czym są bindings?

Bindings tworzą dwukierunkową synchronizację między zmienną a elementem DOM:

<script>
  let vikingName = $state('');
</script>

<!-- Dwukierunkowe wiązanie -->
<input bind:value={vikingName} />

<!-- vikingName aktualizuje się gdy wpisujesz -->
<p>Witaj, {vikingName}!</p>

bind:value - Pola tekstowe

<script>
  let name = $state('');
  let message = $state('');
  let age = $state(18);
</script>

<!-- Input tekstowy -->
<input type="text" bind:value={name} />

<!-- Textarea -->
<textarea bind:value={message}></textarea>

<!-- Input numeryczny -->
<input type="number" bind:value={age} />

bind:checked - Checkboxy

<script>
  let isWarrior = $state(true);
  let hasShield = $state(false);
</script>

<label>
  <input type="checkbox" bind:checked={isWarrior} />
  Wojownik
</label>

<label>
  <input type="checkbox" bind:checked={hasShield} />
  Ma tarczę
</label>

<p>Status: {isWarrior ? 'Wojownik' : 'Cywil'} {hasShield ? 'z tarczą' : ''}</p>

bind:group - Radio i Checkbox grupy

<script>
  // Radio - jedna wartość
  let selectedWeapon = $state('sword');

  // Checkbox group - tablica wartości
  let skills = $state([]);
</script>

<h3>Wybierz broń:</h3>
<label><input type="radio" bind:group={selectedWeapon} value="sword" /> Miecz</label>
<label><input type="radio" bind:group={selectedWeapon} value="axe" /> Topór</label>
<label><input type="radio" bind:group={selectedWeapon} value="spear" /> Włócznia</label>

<h3>Wybierz umiejętności:</h3>
<label><input type="checkbox" bind:group={skills} value="sailing" /> Żeglarstwo</label>
<label><input type="checkbox" bind:group={skills} value="fighting" /> Walka</label>
<label><input type="checkbox" bind:group={skills} value="trading" /> Handel</label>

<p>Broń: {selectedWeapon}</p>
<p>Umiejętności: {skills.join(', ')}</p>

Bifröst łączy światy - bindings łączą dane z interfejsem!

Kod do tej lekcji: App.svelte

<script>
  // Bifröst - Bridge between data and view
  // bind: - two-way binding

  let name = $state('');
  let age = $state(25);
  let isWarrior = $state(false);
  let clan = $state('vikings');
</script>

<main class="bifrost">
  <h1>Bifröst - Bindings</h1>
  <p class="subtitle">Bridge between data and view</p>

  <section>
    <h2>Text Input (bind:value)</h2>
    <input type="text" bind:value={name} placeholder="Warrior name" />
    <p>Hello, <strong>{name || 'stranger'}</strong>!</p>
  </section>

  <section>
    <h2>Number Input</h2>
    <input type="number" bind:value={age} min="18" max="100" />
    <p>Age: {age} years</p>
    <input type="range" bind:value={age} min="18" max="100" />
  </section>

  <section>
    <h2>Checkbox (bind:checked)</h2>
    <label>
      <input type="checkbox" bind:checked={isWarrior} />
      I am a warrior
    </label>
    <p>{isWarrior ? 'Ready for battle!' : 'Staying home'}</p>
  </section>

  <section>
    <h2>Select</h2>
    <select bind:value={clan}>
      <option value="vikings">Vikings</option>
      <option value="saxons">Saxons</option>
      <option value="danes">Danes</option>
    </select>
    <p>Clan: <strong>{clan}</strong></p>
  </section>

  <div class="summary">
    <h2>Summary</h2>
    <p>Name: {name || '-'}</p>
    <p>Age: {age}</p>
    <p>Warrior: {isWarrior ? 'Yes' : 'No'}</p>
    <p>Clan: {clan}</p>
  </div>
</main>

<style>
  .bifrost {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 100%);
    color: #e8d5f7;
    min-height: 100vh;
  }

  h1 {
    color: #ffd700;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #b19cd9;
  }

  section {
    background: rgba(177, 156, 217, 0.1);
    border: 1px solid #b19cd9;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
  }

  h2 {
    color: #b19cd9;
    font-size: 1rem;
    margin-top: 0;
  }

  input[type="text"],
  input[type="number"],
  select {
    width: 100%;
    padding: 0.5rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid #b19cd9;
    border-radius: 4px;
    color: #e8d5f7;
    margin-bottom: 0.5rem;
  }

  input[type="range"] {
    width: 100%;
  }

  label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  strong {
    color: #ffd700;
  }

  .summary {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
  }

  .summary h2 {
    color: #ffd700;
  }
</style>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Co robi bind:value w Svelte?

Zadania praktyczne w grze

Edytor kodu
Uzupełnij kod, aby input był powiązany ze zmienną name