En la tercera lección, hablaremos sobre la representación condicional. Cómo mostrar algo en la página solo si se cumple alguna condición.
→ Vue.js principiantes lección 1: instancia Vue
→ Vue.js para principiantes, lección 2: atributos de enlace
→ Vue.js principiantes lección 3: renderizado condicional
→ Vue.js principiantes lección 4: listas de renderización
→ Vue .js para principiantes lección 5: procesamiento de eventos
→ Vue.js principiantes lección 6: clases y estilos vinculantes
→ Vue.js principiantes lección 7: propiedades calculadas
→ Vue.js principiantes lección 8: componentes
El propósito de la lección
Necesitamos una inscripción en la ficha del producto que informe al visitante si el producto está en stock o no. Si el producto está en stock, se debe mostrar una inscripción
In Stock. Si no está en stock, una inscripción Out of Stock. La decisión de mostrar una inscripción en particular debe tomarse en función de los datos almacenados en la aplicación.
Código inicial
Aquí está el código con el que comenzaremos. Está, como de costumbre, en el archivo
index.html, en la etiqueta <body>:
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
En el archivo
main.js, al configurar una instancia de Vue, se utilizará el siguiente objeto de datos:
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
Observe que
datase ha agregado una nueva propiedad al objeto . Esta es una propiedad inStockque tiene un valor booleano true.
Tarea
A la hora de desarrollar aplicaciones web, muchas veces es necesario que un elemento se muestre en la página en función del cumplimiento de una determinada condición. Por ejemplo, si se agota el stock de un artículo, debe informarlo en la ficha del artículo.
Está previsto que los mensajes correspondientes se emitan como elementos
<p>. Esto significa que en algún lugar index.htmlhabrá los siguientes elementos:
<p>In Stock</p>
<p>Out of Stock</p>
Nuestra tarea es retirar uno de ellos en caso de que la mercancía esté en stock, y el otro en una situación en que la mercancía no esté en stock.
La solucion del problema
En Vue, la solución a este problema parece simple y directa.
Como ya sabe, los datos que indican la presencia o ausencia de mercancías en stock se describen en
main.js, en el objeto data:
inStock: true
Para decirle al sistema qué elemento
<p>renderizar, podemos usar las directivas v-ify v-else. Esto significa que lo index.htmlsiguiente caerá en :
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
Si
inStockcontiene un valor verdadero, se imprime el primer elemento <p>. De lo contrario, se mostrará el segundo elemento. En nuestro caso inStock, el valor está escrito true, por lo que se mostrará In Stock.
Tenemos existencias en almacén.
Gran! Acabamos de utilizar la representación condicional para mostrar detalles del producto. Hemos solucionado el problema. Pero no nos detengamos ahí y continuemos nuestra exploración de la representación condicional.
Directiva V-else-if
Nuestro mecanismo para la representación condicional se basa en las pautas
v-ify v-elsese puede ampliar agregando otro nivel de lógica. Esto se puede hacer usando la directiva v-else-if. Para demostrar esto, compliquemos un poco nuestro ejemplo.
Suponga que el objeto
data, en main.js, tiene información sobre la cantidad de bienes. Se almacenan en la propiedad inventory:
inventory: 100
Al analizar esta propiedad utilizando expresiones de JavaScript entre comillas, podemos proporcionar información de producto más precisa a los visitantes de la página:
<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>
En esta situación, el primer elemento se mostrará en la página
<p>, ya que la expresión correspondiente resulta ser verdadera.
Directiva V-show
Si un elemento de página debe ocultarse y mostrarse con frecuencia, significa que tiene sentido consultar la directiva para implementar este mecanismo
v-show. Un elemento con dicha directiva siempre estará presente en el DOM, pero será visible solo si la condición pasada a la directiva resulta ser verdadera. De hecho, estamos hablando del hecho de que, gracias al uso de esta directiva, se aplicará una propiedad CSS al elemento, por condición display: none.
Este método es más eficaz que gestionar elementos con
v-ify v-else.
La aplicación de esta directiva se ve así:
<p v-show="inStock">In Stock</p>
La solución a nuestro problema, en la que
v-ifse utilizaron las directivas y v-else, nos conviene. Por tanto, nos centraremos en ello y no cambiaremos nada.
Taller
Agregue una propiedad al objeto de datos
onSale. Debe usarse para controlar la representación de un elemento <span>que muestra texto On Salee informa a los visitantes sobre la venta.
Aquí hay una plantilla que puede usar para resolver este problema.
Aquí está la solución al problema.
Salir
Hoy aprendiste sobre el renderizado condicional usando Vue. A saber, se trataba de lo siguiente:
- Hay directivas de Vue que le permiten renderizar elementos de forma condicional:
- v-si
- v-else-if
- v-else
- v-show
- Al trabajar con directivas, puede utilizar expresiones JavaScript que se les pasan entre comillas.
- Si la expresión pasada a la directiva entre comillas es verdadera, se genera el elemento.
- La directiva
v-showsolo afecta la visibilidad de un elemento, no inserta elementos en el DOM y no elimina elementos del DOM.
¿Tiene algún problema que usted, habiendo comenzado a familiarizarse con Vue, ya esté planeando resolver con la ayuda de este marco?
→ Vue.js principiantes lección 1: instancia Vue
→ Vue.js para principiantes, lección 2: atributos de enlace
→ Vue.js principiantes lección 3: renderizado condicional
→ Vue.js principiantes lección 4: listas de renderización
→ Vue .js para principiantes lección 5: procesamiento de eventos
→ Vue.js principiantes lección 6: clases y estilos vinculantes
→ Vue.js principiantes lección 7: propiedades calculadas
→ Vue.js principiantes lección 8: componentes
