Reaktivnost v ogrodju Vue

Vsaka sprememba podatkov iz data povzroči takojšnjo spremembo prikaza teh podatkov na strani. Takšno vedenje Vue se imenuje reaktivnost.

Preverimo v praksi. Recimo, da imamo naslednjo lastnost:

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

Izpišimo vrednost te lastnosti:

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

Naredimo gumb, ob kliku na katerega se bo spremenila naša lastnost:

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

Zdaj pa napišimo metodo, ki se bo klicala ob kliku na gumb in spreminjala lastnost:

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

Če združimo celotno kodo in kliknemo na gumb - se bo besedilo na zaslonu reaktivno spremenilo v drugo.

Podana je lastnost text. Izpišite vsebino te lastnosti v kakem odstavku.

Podan je gumb. Naredite tako, da ob kliku na ta gumb se vrednost lastnosti text reaktivno spremeni v drugo.

Podana sta dva gumba. Naredite tako, da ob kliku na prvi gumb se vrednost lastnosti text reaktivno spremeni v eno vrednost, ob kliku na drugega pa - v drugo.