Explication détaillée du rendu conditionnel Vue.js

Cet article partage principalement avec vous l'explication détaillée du rendu conditionnel de Vue.js. Dans les modèles de chaînes, tels que Handles, nous devons écrire un bloc conditionnel comme celui-ci :

<!-- Handlebars 模板 -->{{#if ok}}
    <h1>Yes</h1>{{/if}}

Dans Vue, nous utilisons la directive v-if pour réaliser la même fonction :

<h1 v-if="ok">Yes</h1>

Vous pouvez également utiliser v-else pour ajouter un "bloc else" :

<h1 v-if="ok">Yes</h1>
No

# Utiliser le regroupement de rendu conditionnel <template> sur les éléments v-if

Parce que v-if est une directive, elle doit être ajoutée à un élément. Mais que se passe-t-il si vous souhaitez changer plusieurs éléments ? À ce stade, vous pouvez traiter un <template> élément comme un élément d'emballage invisible et utiliser v-if dessus. Le résultat final du rendu sera sans <template> éléments.

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

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

# v-else et v-else-if

peuvent être représentés par la directive v-else pour représenter le "bloc else" de v-if : < L'élément 🎜>

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

doit immédiatement suivre l'élément avec v-else ou v-if, sinon il ne sera pas reconnu. v-else-if

Semblable à

, v-else doit également suivre un élément avec v-else-if ou v-if. v-else-if

v-show

Une autre option pour afficher des éléments en fonction de conditions est la directive

. v-show

<h1 v-show="ok">Hello!</h1>

La différence est que les éléments avec

seront toujours rendus et resteront dans le DOM. v-show Basculez simplement l’affichage des propriétés CSS de l’élément. v-show

Notez que ne prend pas en charge l'élément v-show, ni ne prend en charge <template>. v-else

v-if vs v-show

est un "vrai" rendu conditionnel car il garantit que les écouteurs d'événements et les sous-composants à l'intérieur du bloc conditionnel pendant le changement sont détruits et reconstruits de manière appropriée. v-if

est également paresseux : si la condition est fausse lors du rendu initial, rien n'est fait - le bloc conditionnel ne sera rendu qu'à la première fois que la condition devient vraie. v-if

En revanche,

est beaucoup plus simple : l'élément est toujours rendu quelles que soient les conditions initiales et est simplement basculé en fonction du CSS. v-show

En général,

a une surcharge de commutation plus élevée, tandis que v-if a une surcharge de rendu initiale plus élevée. Par conséquent, il est préférable d'utiliser v-show si vous devez changer très fréquemment ; si les conditions changent rarement au moment de l'exécution, il est préférable d'utiliser v-show. v-if

v-if

Dans les modèles de chaînes, tels que guidons, nous devons écrire un bloc conditionnel comme celui-ci :

<!-- Handlebars 模板 -->{{#if ok}}
    <h1>Yes</h1>{{/if}}

Dans Vue, nous utilisons

La directive réalise la même fonction : v-if

<h1 v-if="ok">Yes</h1>

Vous pouvez également utiliser

pour ajouter un "bloc else" : v-else

<h1 v-if="ok">Yes</h1>
No

# Utilisez < sur le element 🎜> Regroupement de rendu conditionnel <template>v-ifParce que

est une directive, elle doit être ajoutée à un élément. Mais que se passe-t-il si vous souhaitez changer plusieurs éléments ? À ce stade, vous pouvez traiter un

élément v-if comme un élément d'emballage invisible <template> et utiliser dessus. Le résultat final du rendu sera sans v-if éléments. <template>

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

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

#

et v-elsev-else-if peuvent être représentés par la directive

pour représenter le "bloc else" de

 : < L'élément 🎜>v-elsev-if

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

doit immédiatement suivre un élément avec

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

ou

, sinon il ne sera pas reconnu. v-elsev-if Semblable à v-else-if,

doit également suivre un élément avec

ou v-else. v-else-ifv-ifv-showv-else-if

Une autre option pour afficher des éléments en fonction de conditions est la directive

.

v-showLa différence est que les éléments avec

seront toujours rendus et resteront dans le DOM.

<h1 v-show="ok">Hello!</h1>

Basculez simplement l’affichage des propriétés CSS de l’élément.

v-showv-showNotez que

ne prend pas en charge l'élément

, ni ne prend en charge . v-show<template>v-elsev-if vs v-show

est un "vrai" rendu conditionnel car il garantit que les écouteurs d'événements et les sous-composants à l'intérieur du bloc conditionnel pendant le changement sont détruits et reconstruits de manière appropriée.

v-if est également paresseux : si la condition est fausse lors du rendu initial, rien n'est fait - le bloc conditionnel ne sera rendu qu'à la première fois que la condition devient vraie.

En revanche, v-if est beaucoup plus simple : l'élément est toujours rendu quelles que soient les conditions initiales et est simplement basculé en fonction du CSS.

En général, v-if a une surcharge de commutation plus élevée, tandis que v-show a une surcharge de rendu initiale plus élevée. Par conséquent, il est préférable d'utiliser v-show si vous devez changer très fréquemment ; si les conditions changent rarement au moment de l'exécution, il est préférable d'utiliser v-if.

Recommandations associées :

Vue.js—Rendu conditionnel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!