Directivas v-if y v-else

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.

¡Suscríbete y continúa aprendiendo!

Directivas v-if y v-else