vue affiche différents éléments en fonction de différentes sélections

Avec le développement continu d'Internet, les sites Web et les applications accordent de plus en plus d'attention à l'expérience utilisateur. Un aspect important consiste à rendre l’interface utilisateur plus personnelle et flexible. Dans ce cas, le rendu dynamique des éléments devient très important. Vue est un framework JavaScript populaire qui facilite le rendu dynamique d'éléments. Dans cet article, nous apprendrons comment utiliser Vue pour afficher différents éléments en fonction de différentes sélections.

Bases de Vue

Avant de commencer, nous devons d'abord comprendre quelques connaissances de base de Vue. Qu'est-ce que Vue ? Vue est un framework JavaScript moderne pour créer des interfaces utilisateur. À la base se trouve un système réactif qui facilite la liaison des données au DOM. Vue fournit de nombreuses instructions, composants et fonctions de cycle de vie pour nous aider à gérer et à exploiter le DOM plus facilement.

Dans les applications Vue, les données et les vues sont liées les unes aux autres. Lorsque les données changent, la vue change en conséquence. Ce système réactif facilite le rendu dynamique des éléments. Une directive dans Vue est un attribut HTML spécial qui indique à Vue comment gérer les éléments DOM.

Directive v-if

La directive v-if est l'une des directives les plus couramment utilisées dans Vue. Il est utilisé pour restituer dynamiquement des éléments en fonction de conditions. La syntaxe de la directive v-if est la suivante :

<template>
  <div>
    <div v-if="condition1">Content 1</div>
    <div v-if="condition2">Content 2</div>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la directive v-if pour restituer dynamiquement différents contenus en fonction de différentes conditions. Lorsque la condition1 est vraie, le contenu 1 sera affiché ; lorsque la condition2 est vraie, le contenu 2 sera affiché. Si condition1 et condition2 sont fausses, aucun élément div ne sera affiché. Notes sur la directive

v-if

v-if est une directive paresseuse. Cela signifie que si la condition est fausse, l'élément ne sera pas rendu dans le DOM. Cela peut améliorer les performances si vous disposez d'un grand nombre d'éléments qui doivent être rendus dynamiquement dans votre application Vue.

Une autre chose à noter est que v-if peut être utilisé en combinaison avec v-else. v-else est une instruction subsidiaire de v-if, qui est utilisée pour restituer un autre élément tandis qu'un élément est rendu par l'instruction v-if. La directive v-else doit être écrite après la directive v-if et au même niveau.

<template>
  <div>
    <div v-if="condition1">Content 1</div>
    <div v-else-if="condition2">Content 2</div>
    <div v-else>Content 3</div>
  </div>
</template>

Dans le code ci-dessus, lorsque la condition1 est vraie, le contenu 1 sera affiché ; lorsque la condition1 est fausse et la condition2 est vraie, le contenu 2 sera affiché ; lorsque la condition1 et la condition2 sont toutes deux fausses, le contenu 3 sera affiché.

Commande v-show

Une autre façon de rendre dynamiquement des éléments consiste à utiliser la commande v-show. La directive v-show est similaire à la directive v-if, mais elle ne restitue pas dynamiquement les éléments en contrôlant si l'élément est rendu dans le DOM. En revanche, v-show obtient le contrôle en modifiant l'affichage des propriétés CSS de l'élément. La syntaxe de la directive

v-show est la suivante :

<template>
  <div>
    <div v-show="condition1">Content 1</div>
    <div v-show="condition2">Content 2</div>
  </div>
</template>

Si la condition1 est vraie, alors le premier élément div sera affiché et le deuxième élément div sera masqué. Si la condition2 est vraie, alors le deuxième élément div sera affiché et le premier élément div sera masqué. Si condition1 et condition2 sont fausses, les deux éléments div seront masqués.

Notes sur la directive v-show

Contrairement à v-if, la directive v-show restitue toujours l'élément dans le DOM, mais contrôle uniquement la visibilité de l'élément via l'affichage des attributs CSS. Cela signifie que si un grand nombre d'éléments doivent être rendus dynamiquement dans une application Vue, la directive v-show peut affecter les performances.

Une autre chose à noter est que la directive v-show est plus adaptée aux éléments qui doivent être changés fréquemment. Étant donné que v-show contrôle uniquement la visibilité des éléments en modifiant les propriétés CSS, cela est plus rapide que v-if. Cependant, pour les éléments qui n'ont pas besoin d'être changés fréquemment, v-if peut être préférable car il peut supprimer complètement l'élément du DOM, améliorant ainsi les performances.

Résumé

Dans cet article, nous avons appris à utiliser Vue pour afficher différents éléments en fonction de différentes sélections. Nous avons découvert les instructions v-if et v-show et compris leurs différences et précautions. Pour les développeurs d'applications Vue, le rendu dynamique des éléments est très important. En comprenant les bases de Vue, nous pouvons facilement implémenter des éléments rendus dynamiquement, améliorant ainsi l'expérience utilisateur de nos applications.

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!