Vue-da maglumatlary girizýän ýerlerde iki tarapa baglanyşyk

Indi biz Vue freýmworkinde girizýän ýerler bilen işlemegi öwreneris. Olaryň kömegi bilen sahypa maglumatlary reaktiw goşup göreris. Başlaýaly. Bizde girizýän ýer bolsun:

<template>
	<input>
</template>

Şeýle hem, bizde message aýratynlygy bolsun:

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

Biz bu aýratynlyk we girizýän ýeri şeýle baglap bileris, ýöne olaryň biriniň üýtgemegi beýleki üýtgemegine getirer. Bu v-model direktiwasy bilen ýerine ýetirilýär, onda girizýän ýere baglanan aýratynlyk görkezilýär.

Geliň, girizýän ýerimize message aýratynlygyny baglaýaly:

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

Kody işledeniňizden soň, girizýän ýerde message aýratynlygynyň teksti bolar. Eger-de girizýän ýerdäki maglumatlary redaktirleseňiz - aýratynlyk hem şol derejede üýtgerer. Muny görmek üçin, geliň girizýän ýere girizilýän mazmuny nähili bolsa bir abzasda görkezeliň:

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

Girizýän ýer berlen. Girizýän ýere girizilýän teksti şol ýeriň aşagyndaky abzada derrew görkeziň.

Öňki meseläni üýtgediň, şeýle bolsun, tekst ýokarky registrde görkezilsin.

Girizýän ýer berlen. Onda san girizilsin. Girizilýän sanyň kwadraty girizýän ýere girizilişi bilen abzada görkezilsin.