Дерекжақты деректер байланысын 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>

Енгізу өрісі берілген. Енгізу өрісіне енгізілетін мәтін оның астындағы абзацта бірден шығарылуы үшін жасаңыз.

Алдыңғы тапсырманы өзгертіңіз, мәтін жоғарғы регистрде шығарылсын.

Енгізу өрісі берілген. Оған сан енгізілсін. Енгізу барысында абзацта енгізілген санның квадраты шығарылуы үшін жасаңыз.