Rodymas pagal sąlygą Vue

Kita direktyva, kurią išnagrinėsime, vadinama v-if. Su jos pagalba galima rodyti arba slėpti elementus. Kaip ši direktyva veikia: parametru ji priima bet kurią objekto data savybę. Jei ši savybė turi reikšmę true - tuomet elementas bus rodomas, o jei false - tuomet paslėptas.

Pažiūrėkime pavyzdžiu. Tegu mes turime pastraipą su atributu v-if. Šio atributo reikšme tegu būna savybė visible, štai taip:

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

Nustatykime mūsų savybės reikšmę į true. Šiuo atveju pastraipa bus rodoma:

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

O štai jei visible nustatysime į reikšmę false, tai pastraipa bus paslėpta:

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

Tegu data saugoma savybė visible. Tegu jūs taip pat turite dvi pastraipas. Padarykite tai, kad pirmoji pastraipa būtų rodoma ekrane, jei savybė visible yra true, o antroji pastraipa, atvirkščiai, rodoma, jei savybė visible yra false.