Реактивност у Vue.js оквиру

Било која промена података из 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 реактивно мења у једну вредност, а при клику на друго - у другу.