Vue.js
Villkorlig återgivning

Syntax

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

Anmärkningar

Översikt

I Vue.js uppnås villkorad rendering genom att använda en uppsättning direktiv om element i mallen.

v-if

Elementet visas normalt när tillståndet är true . När villkoret är false inträffar endast delvis sammanställning och elementet återges inte i DOM förrän villkoret blir true .

v-else

Accepterar inte ett villkor utan gör elementet snarare om det föregående elementets v-if villkor är false . Kan endast användas efter ett element med v-if direktivet.

v-show

Uppträder på samma sätt som v-if , men elementet kommer alltid att återges i DOM, även om villkoret är false . Om villkoret är false kommer detta direktiv helt enkelt att ställa in elementets display på none .

v-if / v-annars

Förutsatt att vi har en Vue.js instans definierad som:

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

Du kan villkorligt återge alla HTML-element genom att inkludera v-if-direktivet; elementet som innehåller v-if kommer endast att visas om villkoret utvärderas till sant:

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

Elementet <h1> kommer att återges i det här fallet eftersom variabeln 'a' är sant. v-if kan användas med något uttryck, beräknad egenskap eller funktion som utvärderar till en booleska:

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

Du kan använda ett template att gruppera flera element för ett enda villkor:

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

När du använder v-if har du också möjligheten att integrera ett motvillkor med v-else direktivet. Innehållet inne i elementet visas endast om villkoret för föregående v-if var falskt. Observera att detta betyder att ett element med v-annars måste visas omedelbart efter ett element med v-if.

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

Precis som med v-if, med v-annars kan du gruppera flera HTML-element i ett <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

Användningen av v-show direktivet är nästan identisk med v-if . De enda skillnaderna är att v-show inte stöder <template> -syntaxen, och det finns inget "alternativt" tillstånd.

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

Den grundläggande användningen är som följer ...

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

Medan v-show inte stöder v-else direktivet för att definiera "alternativa" villkor, kan detta åstadkommas genom att negera det föregående ...

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