Vue'da Inputlara Çift Yönlü Veri Bağlama

Şimdi Vue framework'ünde inputlarla çalışmayı öğreneceğiz. Onların yardımıyla sayfaya reaktif olarak veri ekleyeceğiz. Hadi başlayalım. Bir inputumuz olduğunu varsayalım:

<template>
	<input>
</template>

Ayrıca bir message özelliğimiz olduğunu varsayalım:

data() {
	return {
		message: 'hello',
	}
}

Bu özelliği ve inputu, herhangi birindeki değişikliğin diğerinin de değişmesine yol açacağı şekilde bağlayabiliriz. Bu, inputa bağlanan özelliğin belirtildiği v-model direktifi kullanılarak yapılır.

Hadi inputumuzu message özelliğine bağlayalım:

<template>
	<input v-model="message">
</template>

Kod çalıştırıldıktan sonra inputta message özelliğinin metni olacak. Ve eğer inputtaki veriler düzenlenirse - özellik de buna uygun şekilde değişecek. Bunu görmek için, hadi inputa girilen içeriği bir paragrafta bir yerde gösterelim:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Bir input verilmiştir. Inputa girilen metnin hemen altındaki paragrafta gösterilmesini sağlayın.

Önceki görevi, metnin büyük harfle gösterileceği şekilde değiştirin.

Bir input verilmiştir. İçine bir sayı girilsin. Giriş sırasında paragrafta girilen sayının karesinin gösterilmesini sağlayın.