Renderizado Condicional en Vue

La siguiente directiva que estudiaremos se llama v-if. Con ella puedes mostrar u ocultar elementos. Cómo funciona esta directiva: toma como parámetro cualquier propiedad del objeto data. Si esta propiedad tiene el valor true, entonces el elemento será mostrado, y si es false, entonces se ocultará.

Veamos un ejemplo. Supongamos que tenemos un párrafo con el atributo v-if. Que el valor de este atributo sea la propiedad visible, así:

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

Establezcamos el valor de nuestra propiedad a true. En este caso el párrafo se mostrará:

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

Y si visible se establece en el valor false, entonces el párrafo se ocultará:

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

Supongamos que en data se almacena la propiedad visible. Supongamos también que tienes dos párrafos. Haz que el primer párrafo se muestre en la pantalla si la propiedad visible es igual a true, y el segundo párrafo, por el contrario, se muestre si la propiedad visible es igual a false.