Renderização Condicional em Vue

A próxima diretiva que estudaremos é chamada de v-if. Com ela, é possível mostrar ou ocultar elementos. Como essa diretiva funciona: ela recebe como parâmetro qualquer propriedade do objeto data. Se essa propriedade tiver o valor true - então o elemento será exibido, e se for false - então será ocultado.

Vamos ver um exemplo. Suponha que temos um parágrafo com o atributo v-if. Seja a propriedade visible o valor desse atributo, assim:

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

Vamos definir o valor da nossa propriedade como true. Neste caso, o parágrafo será exibido:

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

Mas se visible for definido como false, então o parágrafo será ocultado:

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

Suponha que data armazena a propriedade visible. Suponha que você também tem dois parágrafos. Faça com que o primeiro parágrafo seja exibido na tela se a propriedade visible for true, e o segundo parágrafo, ao contrário, seja exibido se a propriedade visible for false.