Uunganishaji wa Pande Mbili wa Data kwa Inputi katika Vue

Sasa tutajifunza kufanya kazi na inputi katika mfumo wa Vue. Kwa kutumia hizo, tutaweza kuongeza data kwenye ukurasa kwa njia inayobadilika. Twende kazi. Tuseme tuna inputi:

<template>
	<input>
</template>

Tuseme pia tuna sifa message:

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

Tunaweza kuunganisha sifa hii na inputi kwa namna ambayo mabadiliko ya yoyote kati yao yatasababisha mabadiliko kwa nyingine. Hii inafanywa kwa kutumia derectiva v-model, ambayo imeelezea sifa iliyounganishwa na inputi.

Wacha tuunganishe kwa inputi yetu sifa message:

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

Baada ya kuanzisha kificho kwenye inputi kutakuwa na maandishi ya sifa message. Na ukibadilisha data kwenye inputi - sifa pia itabadilika kwa njia inayofaa. Ili kuona hili, wacha tuonyeshe yaliyowekwa kwenye inputi mahali pengine kwenye aya:

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

Amepewa inputi. Fanya ili maandishi yaliyoingizwa kwenye inputi yalionyeshe mara moja kwenye aya iliyo chini yake.

Badilisha shida iliyopita kwa namna ambayo maandishi yalionyeshe kwa herufi kubwa.

Amepewa inputi. Tuseme nambari inaingizwa ndani yake. Fanya ili kwenye aya kadiri ya kuingiza ionyeshe mraba wa nambari iliyoingizwa.