Kereaktifan dalam Framework Vue

Sebarang perubahan data dari data mengakibatkan perubahan serta-merta paparan data tersebut pada halaman. Tingkah laku Vue ini dipanggil kereaktifan.

Mari kita uji secara praktikal. Katakan kita mempunyai sifat berikut:

data() {
	return {
		text: 'xxx',
	}
}

Tunjukkan nilai sifat ini:

<template>
	{{ text }}
</template>

Buat satu butang, yang apabila ditekan akan menukar sifat kita:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Sekarang tulis kaedah yang akan dipanggil apabila butang diklik dan mengubah sifat:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Jika semua kod dikumpulkan dan butang ditekan - teks pada skrin akan secara reaktif bertukar kepada yang lain.

Diberi sifat text. Tunjukkan kandungan sifat ini dalam mana-mana perenggan.

Diberi satu butang. Lakukan supaya apabila diklik pada butang ini nilai sifat text berubah secara reaktif kepada yang lain.

Diberi dua butang. Lakukan supaya apabila diklik pada butang pertama nilai sifat text berubah secara reaktif kepada satu nilai, dan apabila diklik pada butang kedua - kepada yang lain.