Vue-da Inputlara Ikiterefli Data Binding

Indi biz Vue frameworkunda inputlarla islemeyi oyreneceyik. Onlarin vasitesile sehifeye reaktiv sekilde data elave edeceyik. Gelın baslayaq. Tutaq ki, bizim bir inputumuz var:

<template>
	<input>
</template>

Tutaq ki, bizim hemcinin message xususiyyetimiz var:

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

Biz bu xususiyyeti ve inputu elaqelendire bilerik ki, onlardan her hansi birinin deyisdirilmesi digərinin deyismesine getirib cixarsin. Bu, inputa baglanan xususiyyeti gosteren v-model direktivi vasitesile edilir.

Gelin inputumuzu message xususiyyetine baglayaq:

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

Kodu ise saldiqdan sonra inputda message xususiyyetinin metni olacaq. Əgər inputdakı melumatları redakte etseniz - xususiyyet de muvafiq sekilde deyisecek. Bunu gormek ucun gelin inputa daxil edilen mezmunu hardasa bir abzasda cixartaq:

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

Bir input verilib. Elə edin ki, inputa daxil edilen metn onun altındakı abzada derhal gosterilsin.

Əvvəlki məsələni elə deyisin ki, metn yuxarı registrde gosterilsin.

Bir input verilib. Tutaq ki, ora bir eded daxil edilir. Elə edin ki, abzada daxil edilen ededin kvadratı gosterilsin.