No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
16H
51M
24S

Conditional rendering

17/37
Recursos

Aportes 8

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Conditional Rendering
Membretando el comentario:

  • Un `v-if, posee costos de renderizado al estar alternando obligando a vue caer en un proceso de actualizaci贸n.
  • Un v-show, posee costos de renderizado al inicio pero minimizados por una precarga de la condicional.

Adem谩s, de que en un proceso de renderizado con v-if, pega en el proceso de destrucci贸n de los elementos ocasionando que el perfomarce de la aplicaci贸n se vea afectada, cuando sea estresada.

Por 煤ltimo, eviten utilizar v-ifcon un v-for en una misma l铆nea de declaraci贸n por ahorrase c贸digo. link

驴Cu谩l estructura es mejor?

La respuesta corta es: 鈥淣inguna es mejor鈥. Todo depende de lo que necesites.
.
Hay que tener en cuenta algunas cosas a la hora de decidir si usar una u otra, por ejemplo, recordemos que con v-if los elementos NO SE RENDERIZAN, por tanto, mientras nuestra aplicaci贸n vaya fluyendo pueda que ese if se convierta en true, lo que significar谩 que Vue tendr谩 que armar cada uno de los elementos que haya dentro (imagina si le pones un v-if a un pedazo enorme de HTML que se va a estar mostrando y ocultando varias veces鈥)
.
Para v-show, como vimos, los elementos s铆 se renderizan, pero son ocultados mediante estilos.
.
Por estos motivos, es m谩s aconsejable usar v-if 煤nicamente en elementos cuyo renderizado no va a ser tan constante y v-show en los que si ser谩n constante.
.
Sin embargo, tambi茅n depende de la funcionalidad de la aplicaci贸n, ya que puede que lleguemos a usar un v-show``` en un componente cuyo renderizado pueda depender de otro componente que pueda tenerv-ifo que pueda depender de la respuesta de un API. Para este caso, el usarv-showpuede ser un problema pues es probable que al momento de renderizarse el API no haya respondido o que el componente a煤n no se haya renderizado, por lo que al tratar de renderizar este otro componente puede causar errores, para estos casos es mejor usar unv-if``, para que se renderice hasta que el componente haya cargado o hasta que el API haya respondido 馃槃
.
Dejo el c贸digo de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/9e2c54ee17c117db32fe0c572d0995b1c0b2fa35

V-show: 脷til para aquellos elementos que tienen que existir en el DOM, pero simplemente tienen que ocultarse mediante alg煤n estilo cuando no lo requiramos.

V-if: 脷til para Eliminar por completo el elemento del DOM y viene bien para los elementos que no necesitemos que esten ejecutandose todo el tiempo en el navegador.

**Los conditional rendering **
Son directivas de Vue js con la cual establecemos si un componente se muestra o no en base a una condici贸n.

v-show: si la condici贸n se cumple su display ser谩 igual a initial, sino ser谩 none. Lo que hace esta es ocultar o mostrar un componente. No podemos usar v-else o v-else-if con esta directiva

v-if: si la condici贸n se cumple se renderiza el elemento de lo contrario se elimina el elemento del dom.
Podemos usar v-else o v-else-if con esta directiva.

Cuando usarlas?: (opini贸n personal)
-Si el elemento se mostrar谩 constantemente mejor usar v-show , estar usando las funciones del dom para eliminar o insertar un componente es m谩s costoso en performance que un display: none.

-Si el elemento se va a mostrar seg煤n la informaci贸n de una API: la info ser谩 la misma? usar v-show : usar v-if.

nota: no soy un experto es la mera opini贸n de un novato y acepto sugerencias 馃槈

Hay que tener resiliencia en este curso, la verdad estuve a punto de desertar al no entender la parte de meta programaci贸n, ahora quiero seguir viendo las clases, se puso mucho m谩s interesante ahora.

CONDICIONALES - STATUS

Sugiero poner de esta manera los estados de los productos.
ya que se pones 100 unidades en stock sigue diciendo 鈥淯ltima unidad disponible鈥

y mostrar en pantalla el valor stock, para informar cuantas unidades quedan disponibles.

<div class="description__status" v-if="product.stock >= 3"> Disponible!</div>
                <div class="description__status" v-else-if="product.stock === 2"> El producto est谩 por terminarse.</div>
                <div class="description__status" v-else-if="product.stock === 1"> La ultima unidad disponible!.</div>
                <div class="description__status" v-else>No hay productos disponibles!.</div>

saludos!!

No s茅 ustedes pero siento que al bot贸n de agregar al carrito le falta vida.
Le agregu茅 este sencillo estilo:

main .description button:hover {
  background: rgb(50, 1, 143);
  cursor: pointer;
}

Hay un problema de l贸gica en las condiciones que pones, pues al estar igualadas literalmente:

  • product.stock === 3
  • product.stock === 2

tienes el problema de que cuando el stock no sea ni 3 ni 2, se active autom谩ticamente el else, por eso vemos que cu谩ndo el stock es igual a 0, a煤n as铆 muestra el mensaje de 脷ltima unidad disponible!

Lo correcto ser铆a cambiar el v-else por un v-else-if: product.stock === 1