Kondisi Reaktif di Vue

Mari kita buat kondisinya menjadi reaktif. Misalnya, kita buat agar elemen tersembunyi saat tombol ditekan. Anggaplah kita memiliki paragraf berikut:

<template>
	<p v-if="visible">text</p>
</template>

Mari kita buat paragraf kita awalnya ditampilkan:

data() {
	return {
		visible: true,
	}
}

Sekarang buat tombol, yang ketika ditekan paragraf akan disembunyikan:

<template>
	<button @click="hide">sembunyikan</button>
	<p v-if="visible">text</p>
</template>

Metode terikat akan mengubah properti visible menjadi false, sehingga membuat paragraf kita tersembunyi:

methods: {
	hide: function() {
		this.visible = false;
	}
}

Diberikan sebuah paragraf dan sebuah tombol. Anggaplah paragraf awalnya tersembunyi. Buatlah tombol yang akan menampilkan paragraf.

Diberikan sebuah paragraf dan dua tombol. Anggaplah tombol pertama menampilkan paragraf, dan tombol kedua - menyembunyikannya.

Modifikasi tugas sebelumnya sehingga di layar selalu hanya terlihat satu tombol: jika paragraf ditampilkan, maka tombol untuk menyembunyikan, dan jika tersembunyi - maka tombol untuk menampilkan.