Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Directivas v-if y v-else

Veamos qué son las directivas, y cómo podemos mostrar elementos de manera condicionada.

Uso de Directivas

Lo siguiente que aprenderemos es a usar las directivas. Las dos más populares son las directivas v-if y v-for.

Modificación del Contador

Vamos a nuestro ejemplo del contador que hace uso de Options API y agregaremos en nuestro template un nuevo elemento.

Añadimos un elemento <p> con el texto: "Vamos, tú puedes".

Recordemos que para que este componente se termine mostrando, debemos modificar nuestro archivo main y asegurarnos de estar llamando al componente que nos interesa. En este caso, nuestro componente llamado "contador options".

Visualización en el Navegador

Volvemos al navegador y aquí tenemos nuestro párrafo.

También agregaremos otro párrafo que diga:

Objetivo: "Tienes que llegar a 100 clicks".

Un párrafo mejor: Reducimos el objetivo a 20 clicks.

Objetivo: "Tienes que llegar a 20 clicks".

Cambio de Mensajes con `v-if`

Al inicio, queremos que el usuario vea el texto: "Vamos, tú puedes".

Una vez que pase de diez, queremos que diga: "Ya te falta muy poco".

¿Cómo podemos hacer para mostrar este párrafo cuando el usuario todavía no llega a diez? ¿Y otro párrafo cuando ya esté en los últimos diez clicks?

Podemos poner condiciones sobre nuestras etiquetas utilizando v-if.

Debemos incluir una expresión que se evalúe como verdadero o falso.

Ejemplo:

Si contador <= 10, mostramos "Vamos, tú puedes".
En caso contrario, usamos v-else para mostrar "Ya te falta muy poco".

Prueba en el Navegador

Guardamos y vemos el mensaje: "Vamos, tú puedes".

Aumentamos el contador y, una vez que pasamos de diez, el mensaje se actualiza a:

"Ya te falta muy poco".

Esto es gracias a las condiciones y directivas v-if y v-else.

Uso Opcional de `v-else`

No es necesario usar v-else. Es opcional.

Ejemplo:

Si queremos mostrar un mensaje solo al inicio y luego dejar de alentar, podemos hacerlo.
Aumentamos el contador y, después de diez, el mensaje desaparece.

Aplicabilidad en HTML y Componentes

Cuando la condición es verdadera, la etiqueta se muestra.

Opcionalmente, podemos agregar v-else.

Esto funciona con cualquier etiqueta HTML y también con cualquier componente que vayas creando, no solo con párrafos.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Continuando con los fundamentos de Vue. Lo siguiente que aprenderemos es a usar las directivas. Las dos más populares son las directivas “v-if” y "v-for". Vamos a nuestro ejemplo del contador que hace uso de Options API y vamos a agregar en nuestro template un nuevo elemento. Vamos a agregar un elemento “P” que tendrá como texto: “Vamos, tú puedes”. Recordemos que para que este componente se termine mostrando tenemos que modificar nuestro archivo “main” y asegurarnos de estar llamando al componente que nos interesa, en este caso nuestro componente llamado “contador options”. Volvemos al navegador y aquí tenemos nuestro párrafo. Vamos a agregar por aquí un párrafo también que diga objetivo: “Tienes que llegar a 100 clicks”. Un párrafo mejor. Vamos a disminuir esto a 20, nada más. Entonces, al inicio queremos que el usuario vea este texto: “Vamos, tú puedes”. Y una vez que pase de diez, queremos que diga “ya te falta muy poco”. Entonces, ¿Cómo podemos hacer para mostrar este párrafo cuando el usuario todavía no llega ni a diez? ¿Y este párrafo cuando ya esté en los últimos diez clicks? Bueno, podemos poner condiciones sobre nuestras etiquetas. Podemos hacer uso aquí de un "v-if" tenemos que poner una expresión que se evalúe como verdadero o como falso. En este caso, “si el contador es menor o igual a diez”, queremos que diga “vamos, tú puedes”. Y en caso de que no se cumpla la condición, también podemos usar un “v-else”. Entonces guardamos y aquí nos dice: “Vamos, tú puedes”. Vamos a aumentar el contador. Y una vez que pasamos de diez, el mensaje se actualiza por este otro. “Ya te falta muy poco”. Esto es gracias a estas condiciones, a estas directivas "v-if", “v-else”, no es necesario usar un “v-else”, esto es opcional. Por ejemplo, si queremos mostrar un mensaje sólo al inicio y luego ya no alentar, también se puede. Vamos a aumentar el contador y luego de pasar los diez se desaparece. Cuando esta condición es verdadera, la etiqueta se va a mostrar y opcionalmente, si queremos, podemos poner un “v-else”. Esto funciona con cualquier etiqueta HTML y también con cualquier componente que vayas creando. No solamente con los párrafos.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code