Vue.js
Rendering condizionale

Sintassi

• <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> // template v-if
• <element v-show="condition"></element> // v-show

Osservazioni

Panoramica

In Vue.js, il rendering condizionale viene ottenuto utilizzando un insieme di direttive sugli elementi nel modello.

v-if

L'elemento viene visualizzato normalmente quando la condizione è true . Quando la condizione è false , si verifica solo una compilazione parziale e l'elemento non viene reso nel DOM finché la condizione non diventa true .

v-else

Non accetta una condizione, ma esegue il rendering dell'elemento se la condizione v-if dell'elemento precedente è false . Può essere utilizzato solo dopo un elemento con la direttiva v-if .

v-show

Si comporta in modo simile a v-if , tuttavia, l'elemento sarà sempre reso nel DOM, anche quando la condizione è false . Se la condizione è false , questa direttiva semplicemente imposta lo stile di display dell'elemento su none .

v-if / v-else

Supponendo che abbiamo un'istanza Vue.js definita come:

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

Puoi rendere condizionalmente qualsiasi elemento html includendo la direttiva v-if; l'elemento che contiene v-if eseguirà il rendering solo se la condizione restituisce true:

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

L'elemento <h1> verrà visualizzato in questo caso, perché la variabile 'a' è vera. v-if può essere utilizzato con qualsiasi espressione, proprietà calcolata o funzione che restituisce un valore booleano:

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

È possibile utilizzare un elemento template per raggruppare più elementi insieme per una singola condizione:

<!-- 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>

Quando si usa v-if , si ha anche la possibilità di integrare una condizione di contatore con la direttiva v-else . Il contenuto contenuto all'interno dell'elemento verrà visualizzato solo se la condizione della precedente v-if è falsa. Nota che questo significa che un elemento con v-else deve apparire immediatamente dopo 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>

Proprio come con v-if, con v-else puoi raggruppare più elementi html all'interno di 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-mostra

L'uso della direttiva v-show è quasi identico a quello di v-if . Le uniche differenze sono che v-show non supporta la sintassi <template> e non esiste una condizione "alternativa".

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

L'uso di base è il seguente ...

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

Mentre v-show non supporta la direttiva v-else per definire condizioni "alternative", questo può essere ottenuto negando il precedente ...

<!-- 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>