Renderizado condicional en Vue.js
El renderizado condicional sirve para mostrar un bloque de código HTML apartir de la evaluación de una condición. Si la condición es evaluada como true el bloque se mostrará, de lo contrario no se mostrará. Veamos a continuación algunas directivas que hacen esto posible.
Directiva v-if
Para utilizar la directiva v-if basta utilizar la siguiente sintaxis en los atributos de un elemento HTML.
v-if="expression"
De esta fortma, es posible definir si un elemento se muestra o no dependiendo del resultado de una variable o una expresión. En el siguiente ejemplo se muestra el texto "Your order has X items", en donde X es el número de ítems digitados.
<div id="app">
<label for="product">Product X</label><br />
<input type="number" v-model.number="items">
<br />
<p v-if="hasItems()">
You order has {{ '\{\{ items \}\}' }} items
</p>
</div>var app = new Vue({
el: "#app",
data: {
items: 0
},
methods: {
hasItems: function() {
return this.items > 0;
}
}
});Puedes ver este ejemplo corriendo a continuación en CodePen. Incrementar el valor de product para obtener el resultado deseado.
Directiva v-else
La directiva v-else permite mostrar un bloque de código HTML si una condición no se cumple. Esta directiva es un complemento de la directiva v-if y funciona de la siguiente forma. Si la condición del bloque v-if es evaluada como true se mostrará el bloque definido por esta directiva. Si la condición del bloque v-if es evaluada como false entonces se mostrará el bloque definido por la directiva v-else.
Tomando el ejemplo anterior es posible mostrar el texto "No items" cuando el número de ítems sea menor que 1. Para esto basta agregar el siguiente HTML inmediatamente después del elemento con la directiva v-if.
<p v-else>
No items
</p>En el siguiente ejemplo de CodePen puedes ver el resultado.
Directiva v-else-if
La directiva v-else-if permite definir condiciones adicionales a la directiva v-if y funciona de la siguiente manera. Si la condición del bloque v-if es evaluada como false se verificará la primera condición v-else-if inmediatamente posterior. Si dicha condición es evaluada como true será mostrado el bloque perteneciente a esta condición, si resulta false se procederá a evaluar las siguientes directivas v-else-if posteriores si existen, y finalmente la diretiva v-else si existe.
v-else-if="expression"
Tomando el ejemplo anterior, es posible agregar una condición en el caso de que la cantidad del producto sea mayor a cinco, en ese caso, el usuario tendría un 20% de descuento. Veamos cómo quedaría completo este ejemplo.
<div id="app">
<label for="product">Product X</label><br />
<input type="number" v-model.number="items">
<br />
<p v-if="hasItems() && !moreThanFive()">
You order has {{ '\{\{ items \}\}' }} items
</p>
<p v-else-if="moreThanFive()">
You order has {{ '\{\{ items \}\}' }} items. <br />
You have 20% discount.
</p>
<p v-else>
No items
</p>
</div>var app = new Vue({
el: "#app",
data: {
items: 0
},
methods: {
hasItems: function () {
return this.items > 0;
},
moreThanFive: function() {
return this.items > 5;
}
}
});A continuación puedes probar este ejemplo en CodePen.