Todirekte databinding til inputs i Vue

Nu skal vi lære at arbejde med inputs i Vue-frameworket. Med deres hjælp vil vi reaktivt tilføje data til siden. Lad os komme i gang. Lad os sige, at vi har et input:

<template>
	<input>
</template>

Lad os også sige, at vi har en egenskab message:

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

Vi kan forbinde denne egenskab og inputtet på en sådan måde, at ændring af en af dem fører til ændring af den anden. Dette gøres ved hjælp af direktivet v-model, hvor egenskaben, der er bundet til inputtet, angives.

Lad os binde vores input til egenskaben message:

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

Efter kodekørsel vil teksten fra egenskaben message stå i inputfeltet. Og hvis man redigerer dataene i inputfeltet, vil egenskaben også ændre sig i overensstemmelse hermed. For at se dette, lad os udskrive indholdet, der er indtastet i inputfeltet, et eller andet sted i et afsnit:

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

Der gives et input. Gør således, at den tekst, der indtastes i inputfeltet, straks udskrives i afsnittet under det.

Modificer den forrige opgave sådan, at teksten udskrives med store bogstaver.

Der gives et input. Lad et tal indtastes i det. Gør således, at kvadratet af det indtastede tal udskrives i afsnittet efterhånden som det indtastes.