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>

Инпут берилган. Инпутга киритилаётган матн ундан кейинги абзацда дароқ чиқарилишини таъминланг.

Олдинги вазифани шундай модификация қилингки, матн юқори регистрда чиқарилсин.

Инпут берилган. Унга сон киритилсин. Киритиш пайтида абзацда киритилаётган соннинг квадрати чиқарилишини таъминланг.