Vue da Inputlarga Ikki Tomonlama Ma'lumotlar Bog'lash

Hozir biz Vue frameworkida inputlar bilan ishlashni o'rganamiz. Ular yordamida biz sahifaga reaktiv ravishda ma'lumot qo'shamiz. Keling, boshlaylik. Bizda input bo'lsin:

<template>
	<input>
</template>

Shuningdek, bizda message xususiyati bo'lsin:

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

Biz ushbu xususiyat va inputni shunday bog'laymizki, ulardan birining o'zgarishi ikkinchisining o'zgarishiga olib keladi. Bunga v-model direktivi yordamida erishiladi, unda inputga bog'langan xususiyat ko'rsatiladi.

Keling, inputimizga message xususiyatini bog'laymiz:

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

Kod ishga tushgandan so'ng, inputda message xususiyatining matni bo'ladi. Agar inputdagi ma'lumotlarni tahrirlasak - xususiyat ham mos ravishda o'zgaradi. Buni ko'rish uchun, keling inputga kiritilgan tarkibni biron bir abzatsda chiqaramiz:

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

Input berilgan. Inputga kiritilayotgan matn darhol uning ostidagi abzatsda chiqarilsin.

Oldingi vazifani o'zgartiring, shunday qilib matn katta harflarda chiqarilsin.

Input berilgan. Unga son kiritilsin. Kiritilayotgan sonning kvadrati kiritish bilan bir vaqtda abzatsda chiqarilsin.