Condicionales con v-if
Dentro de la vista de los componentes de VueJS también podemos tener cierta lógica, por ejemplo con el v-if puedes hacer que ciertos elementos se muestren o no dependiendo de el valor de una variable. Pongamos un ejemplo:
<template>
<div class="content">
<p v-if="condition">Este mensaje no se va a mostrar</p>
<p>Este mensaje si que se va a mostrar</p>
</div>
</template>
<script>
export default {
data: () => ({
condition: false,
}),
};
</script>
<style scoped></style>En este caso como el valor de la variable condition lo hemos establecido a falso, el primer mensaje no se mostrará, en cambio el segundo valor si que se mostrará. El v-if se puede aplicar a cualquier elemento html, es decir, lo puedes poner en un h1 o en un img o incluso dentro de la etiqueta de otro componente: <mi-componente v-if="condition">.
Es importante saber que si aplicas el v-if a un elemento HTML, se aplicará a todo el elemento, incluso a su contenido. Por ejemplo en el caso de abajo se ocultará toda la lista:
<template>
<div class="content">
<ul v-if="condition">
<li>Todo este elemento no se va a mostrar</li>
<li>Todo lo que haya dentro de la lista no se muestra</li>
</ul>
<p>Este mensaje si que se va a mostrar</p>
</div>
</template>Los v-if también los puedes negar, puedes poner v-else o v-else-if para anidar e incluso puedes crear condiciones más complejas con operadores and y or. Básicamente funciona como un if de un lenguaje de programación normal. Veamos más ejemplos:
<template>
<div class="content">
<ul v-if="condition">
<li>Todo este elemento no se va a mostrar</li>
<li>Todo lo que haya dentro de la lista no se muestra</li>
</ul>
<p v-else-if="list.length !== 0 && list[0] === 0">
Este mensaje si se muestra
</p>
<p v-else>Este mensaje no se muestra porque se cumple la condición</p>
</div>
</template>
<script>
export default {
data: () => ({
condition: false,
list: [0, 2, 3, 4, 5],
}),
};
</script>
<style scoped></style>En este componente solo se mostrará el mensaje del medio. En este ejemplo he creado una lista dentro del data. Básicamente puedes crear cualquier variable javascript dentro del data. Cada variable se separá entre sí con una coma.
v-show. Diferencias con el v-if
El v-show en Vue funciona muy parecido a como lo hace el v-if, pero tiene algunas diferencias. Para empezar, dentro de la condición del v-show puedes colocar todo lo que podías colocar dentro del v-if, por ejemplo:
<template>
<div class="content">
<p v-show="condition">Este mensaje no se va a mostrar</p>
<p>Este mensaje si que se va a mostrar</p>
</div>
</template>
<script>
export default {
data: () => ({
condition: false,
}),
};
</script>
<style scoped></style>El v-show también permitirá o no mostrar un elemento del html pero hay una diferencia fundamental con el v-if.
En el v-if cuando no se muestra un elemento Vue lo elimina directamente del DOM, es decir, elimina toda la etiqueta HTML y la muestra cuando la necesita. El v-show no elimina la etiqueta html, la oculta. Lo que hace el v-show es añadir display:none al elemento para que no se muestre, pero sigue estando en los dentro del DOM.
Otra diferencia fundamental con el v-if es que no puedes hacer v-else con lo cual está más limitado en ese aspecto.
En general yo suelo usar v-show antes que v-if cuando necesito sí o sí que el elemento no se elimine del html de la página y solo permanezca oculto cargado en el DOM.