Renderizado condicional en Vue.js

Author
By Darío Rivera
Posted on 2020-06-22 in 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 N items", en donde N 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;
    }
  }
});

En el siguiente ejemplo de CodePen puedes 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.

v-if="expression"

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 la 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.



Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.