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の値がリアクティブに別の値に変化するようにしてください。

2つのボタンが与えられます。最初のボタンをクリックするとプロパティtextの値がリアクティブに一方の値に変化し、 2番目のボタンをクリックすると他方の値に変化するようにしてください。