Vue.js
Bedingtes Rendern

Syntax

• <element v-if="condition"></element> // v-if
• <element v-if="condition"></element><element v-else="condition"></element> // V-if | v-sonst
• <template v-if="condition">...</template> // Vorlage für v-if
• <element v-show="condition"></element> // V-Show

Bemerkungen

Überblick

In Vue.js wird das bedingte Rendern durch Verwendung einer Reihe von Anweisungen für Elemente in der Vorlage erreicht.

v-if

Element zeigt normalerweise , wenn die Bedingung ist true . Wenn die Bedingung false , wird nur eine teilweise Kompilierung durchgeführt und das Element wird nicht in das DOM gerendert, bis die Bedingung true .

v-else

Akzeptiert keine Bedingung, sondern rendert das Element, wenn die v-if Bedingung des vorherigen Elements false . Kann nur nach einem Element mit der v-if Direktive verwendet werden.

v-show

Verhält sich ähnlich wie v-if das Element jedoch immer in das DOM gerendert wird, auch wenn die Bedingung false . Wenn die Bedingung false , setzt diese Direktive einfach den display des Elements auf none .

v-if / v-else

Angenommen, wir haben eine Vue.js Instanz definiert als:

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

Sie können jedes HTML-Element bedingt darstellen, indem Sie die V-if-Direktive einfügen. Das Element, das v-if enthält, wird nur gerendert, wenn die Bedingung als wahr ausgewertet wird:

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

Das Element <h1> wird in diesem Fall gerendert, da die Variable 'a' wahr ist. v-if kann mit einem beliebigen Ausdruck, einer berechneten Eigenschaft oder einer Funktion verwendet werden, die einen booleschen Wert ergibt:

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

Sie können ein template verwenden, um mehrere Elemente für eine einzelne Bedingung zusammenzufassen:

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

Bei Verwendung von v-if haben Sie auch die Möglichkeit, eine Zählerbedingung in die v-else Direktive zu integrieren. Der Inhalt des Elements wird nur angezeigt, wenn die Bedingung des vorherigen v-if falsch war. Beachten Sie, dass dies bedeutet, dass ein Element mit v-else unmittelbar nach einem Element mit v-if erscheinen muss.

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

Genau wie bei v-if können Sie mit v-else mehrere HTML-Elemente innerhalb einer <template> gruppieren:

<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

Die Verwendung der v-show Direktive ist fast identisch mit der von v-if . Der einzige Unterschied besteht darin, dass v-show die <template> -Syntax nicht unterstützt und es keine "alternative" Bedingung gibt.

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

Die grundlegende Verwendung ist wie folgt ...

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

Während v-show die v-else Direktive zur Definition von "alternativen" Bedingungen nicht unterstützt, kann dies durch Negieren der vorherigen Bedingung erreicht werden.

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