Menampilkan Berdasarkan Kondisi di Vue

Direktif berikutnya yang akan kita pelajari disebut v-if. Dengannya, kita dapat menampilkan atau menyembunyikan elemen. Cara kerja direktif ini: ia menerima properti apa pun dari objek data sebagai parameternya. Jika properti tersebut bernilai true - maka elemen akan ditampilkan, dan jika false - maka akan disembunyikan.

Mari kita lihat contohnya. Misalkan kita memiliki paragraf dengan atribut v-if. Nilai dari atribut ini misalkan adalah properti visible, seperti ini:

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

Mari kita atur nilai properti kita menjadi true. Dalam kasus ini paragraf akan ditampilkan:

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

Namun jika visible diatur ke nilai false, maka paragraf akan disembunyikan:

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

Misalkan dalam data disimpan properti visible. Misalkan Anda juga memiliki dua paragraf. Buatlah sehingga paragraf pertama ditampilkan di layar, jika properti visible sama dengan true, dan paragraf kedua, sebaliknya, ditampilkan jika properti visible sama dengan false.