Comment vue implémente l'affichage et le masquage des éléments (comparez v-if et v-show)

Vue.js est un framework progressif pour créer des interfaces utilisateur. Il existe de nombreuses fonctionnalités avancées dans Vue, dont l'une consiste à afficher et masquer des éléments. Le principe d'implémentation de cette fonction est en fait très simple, mais de nombreux débutants de Vue peuvent être confus. Cet article présentera en détail comment afficher et masquer des éléments dans Vue.

1. Directive v-if

Le moyen le plus simple d'afficher et de masquer des éléments dans Vue est d'utiliser la directive v-if. La directive v-if nécessite d'ajouter une condition à l'élément à masquer ou à afficher. L'élément ne sera affiché que lorsque la condition est vraie, sinon il sera masqué. Par exemple :

<div v-if="show">这是一个需要显示或隐藏的元素</div>

Dans l'exemple ci-dessus, nous avons défini une variable appelée show. Cet élément div ne sera affiché que lorsque la valeur de show est vraie. Si la valeur de show est fausse, cet élément sera masqué.

2. Directive v-show

En plus de la directive v-if, Vue a également une directive pour afficher et masquer des éléments, qui est la directive v-show. Contrairement à la directive v-if, v-show ne supprime pas l'élément du DOM, mais définit la propriété CSS de l'élément display sur none afin que l'élément ne soit pas affiché sur la page.

Par exemple :

<div v-show="show">这是一个需要显示或隐藏的元素</div>

Dans l'exemple ci-dessus, si la valeur de show est vraie, alors cet élément div sera affiché sur la page, et la valeur de display est définie sur block si la valeur de show est fausse, alors cet élément div Il ne sera pas affiché sur la page et la valeur d'affichage n'est aucune.

Il est important de noter que lorsque nous utilisons la directive v-show, l'élément est toujours situé dans le DOM. Cela signifie qu'il occupe toujours de l'espace sur la page. Par conséquent, si vous devez le supprimer complètement sur la page, vous devez utiliser la directive v-if.

3. Comparez les instructions v-if et v-show

Les principes de mise en œuvre des instructions v-if et v-show ont été brièvement présentés ci-dessus. Mais lorsque nous devons ajouter une fonctionnalité d’affichage ou de masquage à un élément, quelle directive devons-nous choisir ?

Tout d'abord, si vous devez masquer ou afficher conditionnellement certains éléments lors du chargement du document, vous devez utiliser la directive v-if. En effet, la directive v-if supprime l'élément du DOM, de sorte qu'il n'occupe pas d'espace sur la page comme le fait la directive v-show. Par conséquent, si vous devez ajouter une logique d'initialisation complexe lors du chargement de la page, l'utilisation de la directive v-if est un bon choix.

Deuxièmement, si vous devez afficher et masquer un élément plusieurs fois, vous devez utiliser la directive v-show. En effet, l'utilisation de la directive v-show peut éviter de recréer et de détruire des éléments à plusieurs reprises, ce qui entraînerait un redessinage de la page et affecterait les performances.

Enfin, lorsque nous devons porter des jugements conditionnels lors de l'utilisation de v-if ou v-show, nous devons utiliser les expressions logiques de ces deux instructions pour porter des jugements conditionnels. De cette façon, nous pouvons les utiliser de manière flexible dans notre code et écrire des applications Vue plus flexibles et plus puissantes.

Résumé :

Il est très simple d'afficher et de masquer des éléments dans Vue. Il suffit d'utiliser la directive v-if ou v-show pour y parvenir. Si vous devez masquer ou afficher certains éléments pendant le chargement du document, vous devez utiliser la directive v-if. Si vous devez afficher et masquer un élément plusieurs fois, vous devez utiliser la directive v-show. Lors de l'utilisation de ces deux instructions, nous devons utiliser les expressions logiques de ces deux instructions pour le jugement conditionnel, afin de pouvoir les utiliser de manière flexible dans le code et écrire des applications Vue plus flexibles et plus puissantes.

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!