Реактивност във 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 да се променя реактивно на една стойност, а при кликване на втория - на друга.