Vue.js
Voorwaardelijke weergave

Syntaxis

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

Opmerkingen

Overzicht

In Vue.js wordt voorwaardelijke weergave bereikt door een reeks richtlijnen voor elementen in de sjabloon te gebruiken.

v-if

Element wordt normaal weergegeven als de voorwaarde true . Wanneer de voorwaarde false , vindt alleen gedeeltelijke compilatie plaats en wordt het element pas in de DOM weergegeven als de voorwaarde true .

v-else

Accepteert geen voorwaarde, maar geeft het element eerder weer als de v-if voorwaarde van het vorige element false . Kan alleen worden gebruikt na een element met de v-if richtlijn.

v-show

Gedraagt zich zoals v-if echter het element wordt altijd weergegeven in de DOM, zelfs wanneer de conditie false . Als de conditie false , zal deze richtlijn gewoon instellen van het element display stijl aan none .

v-if / v-else

Ervan uitgaande dat we een instantie Vue.js hebben die is gedefinieerd als:

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

U kunt elk html-element voorwaardelijk weergeven door de v-if-richtlijn op te nemen; het element dat v-if bevat, wordt alleen weergegeven als de voorwaarde als waar evalueert:

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

Het element <h1> wordt in dit geval weergegeven, omdat de variabele 'a' waar is. v-if kan worden gebruikt met elke expressie, berekende eigenschap of functie die resulteert in een boolean:

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

U kunt een template om meerdere elementen voor één voorwaarde te groeperen:

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

Wanneer u v-if , heeft u ook de mogelijkheid om een tegenvoorwaarde te integreren met de v-else richtlijn. De inhoud in het element wordt alleen weergegeven als de toestand van de vorige v-if onwaar was. Merk op dat dit betekent dat een element met v-else onmiddellijk moet verschijnen na een element met v-if.

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

Net als bij v-if kunt u met v-else meerdere html-elementen groeperen binnen een <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-toon

Het gebruik van de v-show richtlijn is bijna identiek aan dat van v-if . Het enige verschil is dat v-show de syntaxis <template> niet ondersteunt en er is geen "alternatieve" voorwaarde.

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

Het basisgebruik is als volgt ...

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

Hoewel v-show de v-else richtlijn om "alternatieve" voorwaarden te definiëren niet ondersteunt, kan dit worden bereikt door de vorige te ontkennen ...

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