Paparan Bersyarat dalam Vue

Arahan seterusnya yang akan kita pelajari dipanggil v-if. Dengannya, kita boleh menunjukkan atau menyembunyikan elemen. Cara arahan ini berfungsi: ia menerima sebarang sifat objek data sebagai parameternya. Jika sifat tersebut mempunyai nilai true - maka elemen akan ditunjukkan, dan jika false - maka disembunyikan.

Mari kita lihat contoh. Katakan kita ada perenggan dengan atribut v-if. Nilai atribut ini ialah sifat visible, seperti berikut:

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

Mari kita tetapkan nilai sifat kita kepada true. Dalam kes ini, perenggan akan ditunjukkan:

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

Dan jika visible ditetapkan kepada nilai false, maka perenggan akan disembunyikan:

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

Katakan dalam data disimpan sifat visible. Katakan anda juga mempunyai dua perenggan. Buat supaya perenggan pertama ditunjukkan pada skrin, jika sifat visible sama dengan true, dan perenggan kedua, sebaliknya, ditunjukkan jika sifat visible sama dengan false.