Дар 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>

Вуруд дода шудааст. Чун он ки матн ба вуруд ворид карда мешавад, дар абзаси зери он фавран чоп шавад.

Масъалаи қаблиро чунон тағйир диҳед, ки матн дар реҷаи болоӣ чоп шавад.

Вуруд дода шудааст. Фарз кунем, ки рақам ба он ворид карда мешавад. Чун он ки матн ворид карда мешавад, чоркунии рақами воридшуда дар абзас чоп шавад.