Рэактыўнасць у фрэймворку 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 рэактыўна мянялася на адно значэнне, а па кліку на другую - на другое.