Dvipusis duomenų susiejimas su įvesties laukais Vue

Dabar mes mokysimės dirbti su įvesties laukais Vue karkase. Jų pagalba reaktyviai pridėsime duomenis į puslapį. Pradėkime. Tarkime, kad turime įvesties lauką:

<template>
	<input>
</template>

Tarkime, kad taip pat turime savybę message:

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

Mes galime susieti šią savybę ir įvesties lauką taip, kad bet kurio iš jų pakeitimas leistų pakeisti kitą. Tai daroma naudojant direktyvą v-model, kurioje nurodoma su įvesties lauku susieta savybė.

Pririškime prie mūsų įvesties lauko savybę message:

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

Paleidus kodą, įvesties lauke bus savybės message tekstas. O jei redaguosite duomenis įvesties lauke - savybė taip pat pasikeis atitinkamai. Norėdami tai pamatyti, atvaizduokime įvestą į įvesties lauką turinį kur nors pastraipoje:

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

Duotas įvesties laukas. Padarykite taip, kad įvestas į įvesties lauką tekstas iškart būtų rodomas pastraipoje po juo.

Modifikuokite ankstesnį uždavinį taip, kad tekstas būtų rodomas didžiosiomis raidėmis.

Duotas įvesties laukas. Tegul jame įvedamas skaičius. Padarykite taip, kad pastraipoje, kai įvedama, būtų rodomas įvesto skaičiaus kvadratas.