Reaktivitas dalam Framework Vue

Setiap perubahan data dari data menyebabkan perubahan instan pada tampilan data tersebut di halaman. Perilaku Vue seperti ini disebut reaktivitas.

Mari kita buktikan dalam praktik. Misalkan kita memiliki properti berikut:

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

Tampilkan nilai properti ini:

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

Buat tombol yang ketika ditekan akan mengubah properti kita:

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

Sekarang tulis metode yang akan dipanggil saat tombol diklik dan mengubah properti:

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

Jika semua kode digabungkan dan tombol ditekan - teks di layar akan secara reaktif berubah menjadi teks lainnya.

Diberikan properti text. Tampilkan isi properti ini dalam suatu paragraf.

Diberikan sebuah tombol. Buat agar saat diklik pada tombol ini nilai properti text secara reaktif berubah menjadi nilai lainnya.

Diberikan dua tombol. Buat agar saat diklik pada tombol pertama nilai properti text secara reaktif berubah menjadi satu nilai, dan saat diklik pada tombol kedua - menjadi nilai lainnya.