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

←→
↑