Tweederye data-binding na invoere in Vue

Tans sal ons leer hoe om met invoere te werk in die Vue-raamwerk. Met hulle hulp sal ons reaktief data by die bladsy voeg. Kom ons begin. Laat ons 'n invoer hê:

<template>
	<input>
</template>

Laat ons ook 'n eienskap message hê:

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

Ons kan hierdie eienskap en die invoer so verbind dat die verandering van een van hulle lei tot die verandering van die ander. Dit word gedoen met behulp van die direktief v-model, waarin die eienskap gespesifiseer word wat aan die invoer gebind is.

Kom ons bind ons eienskap message aan ons invoer:

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

Na die uitvoering van die kode sal die teks van die eienskap message in die invoer wees. En as jy die data in die invoer redigeer - sal die eienskap ook verander ooreenkomstig. Om dit te sien, laat ons die inhoud wat in die invoer ingevoer is, uitvoer iewers in 'n paragraaf:

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

Gegee 'n invoer. Maak dit so dat die teks wat in die invoer ingevoer word, onmiddellik in die paragraaf daaronder uitgestal word.

Wysig die vorige taak sodat die teks in hoofletters uitgestal word.

Gegee 'n invoer. Laat 'n nommer daarin ingevoer word. Maak dit so dat die kwadraat van die ingevoerde nommer in die paragraaf uitgestal word soos dit ingevoer word.