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>

Инпут берилген. Инпутка киргизилген текст дароо анын астындагы абзацта чыккандай кылыңыз.

Мурунку тапшырманы өзгөртүңүз, текст жогорку регистрде чыккандай кылыңыз.

Инпут берилген. Ага сан киргизилсин деп коёлу. Абзацта киргизилген сандын квадраты чыккандай кылыңыз.