Intro
Vamos a hablar sobre el «renderizado condicional» de HTML. ¿Y esto qué es? Pues la posibilidad de mostrar un trozo de HTML según una condición JS, así de simple.
En nuestro caso vamos a mostrar un texto (Conectado|Desconectado) basado en una nueva variable que crearemos en nuestro data(). Como siempre Vue nos ayuda a ello de una manera muy simple, otra vez a través de unas cuantas directivas, en este caso serán v-if, v-else y v-else-if
Directiva v-if
Vamos a empezar por añadir a nuestro index.html dos etiquetas p cada una con un texto diferente (conectado, desconectado).
[html title=»index.html» firstline=»17″ highlights=»19,20″]
<div class="player-info">
<h1>{{ player }}</h1>
<p>Conectado</p>
<p>Desconectado</p>
</div>
[/html]
Mostrar una u otra dependerá de la variable isOnline que añadiremos a nuestro data()
[js title=»app.js» hightlight=»6″]
const app = Vue.createApp({
data() {
return {
player: ‘Héctor Menduíña Hermelo’,
imgSrc: ‘./assets/img/avatar-1.png’,
isOnline: true
}
}
})
[/js]
Podemos añadir la directiva v-if a un elemento para decidir si lo mostramos o no dependiendo de una condición JS. En este caso nuestra variable isOnline.
[html title=»index.html» firstline=»19″]
<p v-if="isOnline">Conectado</p>
[/html]
Esa linea quiere decir que esa etiqueta p solo se renderizará en caso que isOnline sea verdadera.
La magia viene aquí, con v-if podemos combinar v-else para mostrar otro HTML cuando isOnline sea falsa.
[html title=»index.html» firstline=»19″]
<p v-if="isOnline">Conectado</p>
<p v-else>Desconectado</p>
[/html]
Si cambiamos el valor de la variable isOnline = false veremos que el texto renderizado será «Desconectado»
v-if vs v-show
No siempre se necesita emparejar v-if con v-else. Hay infinidad de casos donde no se suele necesitar v-else. En estos casos, suele ser mejor opción utilizar la directiva v-show.
[html title=»index.html»]
<p v-show="isOnline">Conectado</p>
[/html]
La directiva v-show su utiliza para intercambiar (mostrar/ocultar) la visibilidad de un elemento en lugar de añadir y eliminar el elemento al DOM como hace v-if.
Esto es una consecuencia importante, como puedes imaginar, por motivos de performance, es más eficaz v-show cuando es algo que se muestra y oculta con mucha frecuencia. Al usar v-show el HTML se renderiza siempre en el DOM, pero se oculta con un estilo en linea display: none; que Vue añade por nosotros (puedes comprobarlo inspeccionando el elemento en el navegador).
v-else-if
Vamos a ver como podemos encadenar capas de lógica a nuestro v-if/v-else.
Vamos a cambiar la variable isOnline por status que tendrá dos propiedades: isOnline y coverage para simular la cantidad de cobertura del player.
De esta manera, como ahora nuestra condición coverage es un integer, podemos utilizar algo más de lógica en nuestra expresión JS.
[js title=»app.js» hightlight=»6-9″]
const app = Vue.createApp({
data() {
return {
player: ‘Héctor Menduíña Hermelo’,
imgSrc: ‘./assets/img/avatar-1.png’,
status: {
isOnline: true,
coverage: 83
}
}
}
})
[/js]
[html title=»index.html» firstline=»21″]
<p v-if="status.coverage > 80">Buena conexión</p>
<p v-else-if="status.coverage <= 80 && status.coverage > 30">Normal</p>
<p v-else>Mala conexión</p>
[/html]
La directiva v-else-if nos da una capa intermedia de lógica. Dependiendo del valor de status.coverage mostraremos un HTML u otro. El resultado final después de esta lección debería ser algo como esto (ver imagen).
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!