Vue.js
Representación condicional

Sintaxis

• <element v-if="condition"></element> // v-if
• <element v-if="condition"></element><element v-else="condition"></element> // v-if | v-else
• <template v-if="condition">...</template> // v-if con plantilla
• <element v-show="condition"></element> // v-show

Observaciones

Visión general

En Vue.js, la representación condicional se logra mediante el uso de un conjunto de directivas en los elementos de la plantilla.

v-if

El elemento se muestra normalmente cuando la condición es true . Cuando la condición es false , solo se produce una compilación parcial y el elemento no se representa en el DOM hasta que la condición se vuelve true .

v-else

No acepta una condición, sino que procesa el elemento si la condición v-if del elemento anterior es false . Solo se puede utilizar después de un elemento con la directiva v-if .

v-show

Sin embargo, se comporta de manera similar a v-if , sin embargo, el elemento siempre se representará en el DOM, incluso cuando la condición sea false . Si la condición es false , esta directiva simplemente establecerá el estilo de display del elemento en none .

v-if / v-else

Asumiendo que tenemos una instancia de Vue.js definida como:

var vm = new Vue({
    el: '#example',
    data: {
        a: true,
        b: false
    }
});

Puede representar condicionalmente cualquier elemento html incluyendo la directiva v-if; el elemento que contiene v-if solo se procesará si la condición se evalúa como verdadera:

<!-- will render 'The condition is true' into the DOM -->
<div id="example">
    <h1 v-if="a">The condition is true</h1>
</div>

El elemento <h1> se representará en este caso, porque la variable 'a' es verdadera. v-if puede usarse con cualquier expresión, propiedad computada o función que se evalúe como un valor booleano:

<div v-if="0 === 1">                  false; won't render</div>
<div v-if="typeof(5) === 'number'">   true; will render</div>

Puede usar un elemento de template para agrupar varios elementos para una sola condición:

<!-- in this case, nothing will be rendered except for the containing 'div' -->
<div id="example">
    <template v-if="b">
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
</div>

Al usar v-if , también tiene la opción de integrar una condición de contador con la directiva v-else . El contenido contenido dentro del elemento solo se mostrará si la condición del v-if anterior era falsa. Tenga en cuenta que esto significa que un elemento con v-else debe aparecer inmediatamente después de un elemento con v-if.

<!-- will render only 'ELSE' -->
<div id="example">
    <h1 v-if="b">IF</h1>
    <h1 v-else="a">ELSE</h1>
</div>

Al igual que con v-if, con v-else puede agrupar varios elementos html en un <template> :

<div v-if="'a' === 'b'"> This will never be rendered. </div>
<template v-else>
    <ul>
      <li> You can also use templates with v-else. </li>
      <li> All of the content within the template </li>
      <li> will be rendered. </li>
    </ul>
</template>

v-show

El uso de la directiva v-show es casi idéntico al de v-if . Las únicas diferencias son que v-show no admite la sintaxis <template> y no existe una condición "alternativa".

var vm = new Vue({
    el: '#example',
    data: {
        a: true
    }
});

El uso básico es el siguiente ...

<!-- will render 'Condition met' -->
<div id="example">
    <h1 v-show="a">Condition met</h1>
</div>

Si bien v-show no admite la directiva v-else para definir condiciones "alternativas", esto se puede lograr al anular la anterior ...

<!-- will render 'This is shown' -->
<div id="example">
    <h1 v-show="!a">This is hidden</h1>
    <h1 v-show="a">This is shown</h1>
</div>