მონაცემთა ორმხრივი მიბმა ინპუტებზე Vue-ში

ახლა ჩვენ ვისწავლით ინპუტებთან მუშაობას Vue-ის ფრეიმვორქში. მათი საშუალებით ჩვენ რეაქტიულად დავამატებთ მონაცემებს გვერდზე. მოდით დავიწყოთ. მოდით გვქონდეს ინპუტი:

<template>
	<input>
</template>

მოდით ასევე გვქონდეს თვისება message:

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

ჩვენ შეგვიძლია დავაკავშიროთ ეს თვისება და ინპუტი ისე, რომ რომელიმე მათგანის ცვლილება გამოიწვიოს მეორის ცვლილებას. ეს კეთდება დირექტივის v-model საშუალებით, რომელშიც მითითებულია ინპუტთან მიბმული თვისება.

მოდით მივაბათ ჩვენს ინპუტს თვისება message:

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

კოდის გაშვების შემდეგ ინპუტში იქნება თვისების message ტექსტი. ხოლო თუ შევცვლით მონაცემებს ინპუტში - თვისებაც შეიცვლება შესაბამისად. რომ ამას ვნახოთ, მოდით გამოვიტანოთ ინპუტში შეყვანილი შიგთავსი სადმე აბზაცში:

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

მოცემულია ინპუტი. გახადეთ ისე, რომ ინპუტში შეყვანილი ტექსტი მაშინვე გამოჩნდეს მის ქვემოთ მდებარე აბზაცში.

შეცვალეთ წინა ამოცანა ისე, რომ ტექსტი გამოჩნდეს ზედა რეგისტრში.

მოცემულია ინპუტი. მოდით მასში შეყავთ რიცხვი. გახადეთ ისე, რომ აბზაცში შეყვანისას გამოჩნდეს შეყვანილი რიცხვის კვადრატი.