Vue.js
Renderowanie warunkowe

Składnia

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

Uwagi

Przegląd

W Vue.js renderowanie warunkowe osiąga się poprzez zastosowanie zestawu dyrektyw dotyczących elementów w szablonie.

v-if

Element wyświetla się normalnie, gdy warunek jest true . Gdy warunek jest false , następuje tylko częściowa kompilacja, a element nie jest renderowany w DOM, dopóki warunek nie zostanie true .

v-else

Nie akceptuje warunku, ale raczej renderuje element, v-if warunek v-if poprzedniego elementu jest false . Można używać tylko po elemencie z dyrektywą v-if .

v-show

Zachowuje się podobnie do v-if , jednak element zawsze będzie renderowany w DOM, nawet jeśli warunek jest false . Jeśli warunek jest false , ta dyrektywa po prostu ustawi styl display elementu na none .

v-if / v-else

Zakładając, że mamy instancję Vue.js zdefiniowaną jako:

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

Możesz warunkowo renderować dowolny element HTML, włączając dyrektywę v-if; element zawierający v-if będzie renderowany tylko wtedy, gdy warunek będzie miał wartość true:

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

Element <h1> będzie renderowany w tym przypadku, ponieważ zmienna „a” jest prawdziwa. v-if może być użyte z dowolnym wyrażeniem, właściwością obliczoną lub funkcją, która ma wartość logiczną:

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

Możesz użyć elementu template , aby zgrupować wiele elementów razem dla jednego warunku:

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

Korzystając z v-if , masz również możliwość zintegrowania warunku licznika z dyrektywą v-else . Zawartość zawarta w elemencie zostanie wyświetlona tylko wtedy, gdy warunek poprzedniego v-if był fałszywy. Zauważ, że oznacza to, że element z v-else musi pojawić się natychmiast po elemencie z v-if.

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

Podobnie jak w przypadku v-if, w v-else można grupować wiele elementów HTML razem w <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

Zastosowanie dyrektywy v-show jest prawie identyczne jak w przypadku v-if . Jedyne różnice polegają na tym, że program v-show nie obsługuje składni <template> i nie istnieje warunek „alternatywny”.

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

Podstawowe zastosowanie jest następujące ...

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

Chociaż program v-show nie obsługuje dyrektywy v-else celu zdefiniowania „alternatywnych” warunków, można to osiągnąć, negując poprzedni ...

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