Form Bağlantıları

Form Bağlantıları

v-bind ve v-on kullanarak, form giriş elemanları üzerinde iki yönlü bağlantılar oluşturabiliriz:

<input :value="text" @input="onInput">

methods: {
  onInput(e) {
    // bir v-on işleyicisi, yerel DOM olayını
    // argüman olarak alır.
    this.text = e.target.value
  }
}

function onInput(e) {
  // bir v-on işleyicisi, yerel DOM olayını
  // argüman olarak alır.
  text.value = e.target.value
}

Giriş kutusuna yazmayı deneyin - yazdıkça `` içeriğinin güncellendiğini görmelisiniz.

ipucu

İki yönlü bağlantıları basitleştirmek için, Vue v-model adında bir direktif sağlar; bu, yukarıdakilerin aslında sözdizimsel şeklidir:

<input v-model="text">

v-model otomatik olarak `` değerini bağlanan durum ile senkronize eder, böylece bunun için artık bir olay işleyicisine ihtiyaç duyulmaz.

v-model, sadece metin girişleri için değil, aynı zamanda onay kutuları, radyo düğmeleri ve seçim açılır menüleri gibi diğer giriş türleri için de çalışır. Daha fazla ayrıntıyı Rehber - Form Bağlantıları bölümünde ele alıyoruz.

bilgi

Şimdi, kodu v-model kullanacak şekilde yeniden düzenlemeyi deneyin.