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!

X

Volver al índice

Regístrate

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

Capítulos































31

Directivas v-if y v-else





























































































Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.