Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!

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

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.

Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com