Toveis databinding til inputfelt i Vue

Nå skal vi lære å jobbe med inputfelt i rammeverket Vue. Med deres hjelp vil vi reaktivt legge til data på siden. La oss komme i gang. La oss si vi har et inputfelt:

<template>
	<input>
</template>

La oss også si at vi har en egenskap message:

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

Vi kan koble denne egenskapen og inputfeltet på en slik måte at endring av en av dem fører til endring av den andre. Dette gjøres ved hjelp av direktivet v-model, der egenskapen som er bundet til inputfeltet spesifiseres.

La oss binde egenskapen message til vårt inputfelt:

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

Etter at koden kjøres, vil teksten fra egenskapen message stå i inputfeltet. Og hvis man redigerer dataene i inputfeltet, vil egenskapen også endres tilsvarende. For å se dette, la oss vise innholdet som er skrevet inn i inputfeltet et sted i et avsnitt:

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

Det er gitt et inputfelt. Gjør slik at teksten som skrives inn i inputfeltet umiddelbart vises i avsnittet under det.

Modifiser den forrige oppgaven slik at teksten vises med store bokstaver.

Det er gitt et inputfelt. La det skrives inn et tall. Gjør slik at i avsnittet, etter hvert som det skrives inn, vises kvadratet av det innskrevne tallet.