Vue.js
Rendu conditionnel
Recherche…
Syntaxe
-
<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>
// modèle avec v-if -
<element v-show="condition"></element>
// v-show
Remarques
Il est très important de se rappeler la différence entre v-if
et v-show
. Bien que leurs utilisations soient presque identiques, un élément lié à v-if
ne sera rendu que dans le DOM lorsque sa condition est true
pour la première fois . Lorsque vous utilisez la directive v-show
, tous les éléments sont rendus dans le DOM mais sont masqués en utilisant le style d' display
si la condition est false
!
Vue d'ensemble
Dans Vue.js, le rendu conditionnel est obtenu en utilisant un ensemble de directives sur les éléments du modèle.
v-if
L'élément s'affiche normalement lorsque la condition est true
. Lorsque la condition est false
, seule une compilation partielle se produit et l'élément n'est pas rendu dans le DOM tant que la condition n'est plus true
.
v-else
N'accepte pas une condition, mais rend l'élément si la condition v-if
l'élément précédent est false
. Ne peut être utilisé qu'après un élément avec la directive v-if
.
v-show
Se comporte de la même manière que v-if
, cependant, l'élément sera toujours rendu dans le DOM, même si la condition est false
. Si la condition est false
, cette directive définira simplement le style d' display
l'élément sur none
.
v-if / v-else
En supposant que nous ayons une instance de Vue.js
définie comme suit:
var vm = new Vue({
el: '#example',
data: {
a: true,
b: false
}
});
Vous pouvez rendre conditionnellement n'importe quel élément HTML en incluant la directive v-if; l'élément qui contient v-if ne sera rendu que si la condition est true:
<!-- will render 'The condition is true' into the DOM -->
<div id="example">
<h1 v-if="a">The condition is true</h1>
</div>
L'élément <h1>
sera rendu dans ce cas, car la variable 'a' est vraie. v-if peut être utilisé avec n'importe quelle expression, propriété calculée ou fonction évaluée à un booléen:
<div v-if="0 === 1"> false; won't render</div>
<div v-if="typeof(5) === 'number'"> true; will render</div>
Vous pouvez utiliser un élément de template
pour regrouper plusieurs éléments pour une seule condition:
<!-- 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>
Lorsque vous utilisez v-if
, vous avez également la possibilité d'intégrer une condition de compteur avec la directive v-else
. Le contenu contenu dans l'élément ne sera affiché que si la condition de la v-if précédente était fausse. Notez que cela signifie qu'un élément avec v-else doit apparaître immédiatement après un élément avec v-if.
<!-- will render only 'ELSE' -->
<div id="example">
<h1 v-if="b">IF</h1>
<h1 v-else="a">ELSE</h1>
</div>
Tout comme avec v-if, avec v-else, vous pouvez regrouper plusieurs éléments HTML dans 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-show
L'utilisation de la directive v-show
est presque identique à celle de v-if
. Les seules différences sont que v-show
ne prend pas en charge la syntaxe <template>
, et qu'il n'y a pas de condition "alternative".
var vm = new Vue({
el: '#example',
data: {
a: true
}
});
L'utilisation de base est la suivante ...
<!-- will render 'Condition met' -->
<div id="example">
<h1 v-show="a">Condition met</h1>
</div>
Bien que v-show
ne prenne pas en charge la directive v-else
pour définir des conditions "alternatives", cela peut être accompli en annulant la précédente ...
<!-- 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>