Reaktiwiteit in die Vue raamwerk

Enige verandering aan data uit data lei tot 'n onmiddellike verandering in die vertoning van daardie data op die bladsy. Hierdie gedrag van Vue word reaktiwiteit genoem.

Kom ons toets dit in die praktyk. Laat ons sê ons het die volgende eienskap:

data() {
	return {
		text: 'xxx',
	}
}

Laat ons die waarde van hierdie eienskap vertoon:

<template>
	{{ text }}
</template>

Kom ons maak 'n knoppie, waarop as dit gedruk word ons eienskap sal verander:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Kom ons skryf nou die metode wat sal opgeroep word as daar op die knoppie geklik word en die eienskap sal verander:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

As jy al die kode bymekaar sit en op die knoppie druk - sal die teks op die skerm reaktief verander na 'n ander een.

Gegee eienskap text. Vertoon die inhoud van hierdie eienskap in 'n paar paragrawe.

Gegee 'n knoppie. Maak dit so dat as daar op hierdie knoppie geklik word, die waarde van eienskap text reaktief na 'n ander een verander.

Gegee twee knoppies. Maak dit so dat as daar op die eerste knoppie geklik word, die waarde van eienskap text reaktief na een waarde verander, en as daar op die tweede geklik word - na 'n ander een.