Реактивност во Vue рамката

Секоја промена на податоците од data доведува до моментална промена на приказот на тие податоци на страницата. Таквото однесување на Vue се нарекува реактивност.

Ајде да провериме во пракса. Нека имаме следново својство:

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

Ќе ја прикажеме вредноста на ова својство:

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

Да направиме копче, при кликнување на кое ќе се менува нашето својство:

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

Сега да напишеме метод кој ќе се повикува при клик на копчето и ќе го менува својството:

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

Ако се собере целиот код заедно и се кликне на копчето - текстот на екранот реактивно ќе се смени во друг.

Дадено е својството text. Прикажете ја содржината на ова својство во некој пасус.

Дадено е копче. Направете така што при клик на ова копче вредноста на својството text реактивно да се менува во друга.

Дадени се две копчиња. Направете така што при клик на првото копче вредноста на својството text реактивно да се менува во една вредност, а при клик на второто - во друга.