Vue.js—Rendu conditionnel

Cet article partage avec vous le rendu conditionnel de Vue.js. Les amis dans le besoin peuvent jeter un œil au contenu de cet article

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

# In Use <template> regroupement de rendu conditionnel 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 un é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 :

Liaison des données de table et mise à jour de vue.js+layer

Attributs de balise Vue et rendu conditionnel

Explication détaillée du rendu conditionnel dans le développement de mini-programmes

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!