Vue.js ile form elemanlarından dinamik veri çekme

Vue.js ile form elemanlarından dinamik veri çekme

sezaialkan
Sezai Alkan Frontend Developer

Vue.js ile form elemanlarından v-model ile veriyi iki yönlü olarak bind işlemi sağlayabilmekteyiz. v-model kullanımında vue.js içerisinde oluşturduğumuz değişken ile veriyi işleyebilir veya anlık olarak çekebiliriz.

<template>
	<div>
   		<input type="text" v-model="yakala">
   		<label>{{yakala}}</label>
  	</div> 
</template>

Yukarıda template içerisinde oluşturduğumuz örnek textbox'a v-model attribute ile Vue.js tarafında oluşturduğumuz yakala değişkenini tanımladık.

<script>
	export default {
		data(){
			return {
				yakala : 'Buraya Yazılanı yakalarım', 
			}
		}
	}
</script>

Yukarıda ise Vue.Js tarafından oluşturmamız gereken script kodlarımız bulunmaktadır. Değişken tanımlarken değişkenimize bir değer tanımlar isek bu değer projemiz çalıştığında varsayılan olarak input içerisine yazılacaktır.

 Bu örnek içerisinde anlık kullanıcı tarafından girilen değer label içerisine yazılacaktır.

 v-model kullanımı ek olarak checkbox, selectbox vb. gibi html elemanları üzerinde de kullanım sağlayabilirsiniz.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol