Maison > interface Web > Voir.js > le corps du texte

Comment masquer des éléments dans la vue

青灯夜游
Libérer: 2021-10-27 14:57:39
original
15818 Les gens l'ont consulté

Comment masquer des éléments dans vue : 1. Utilisez la commande "v-if" pour afficher ou masquer des éléments en ajoutant ou en supprimant dynamiquement des éléments DOM dans l'arborescence DOM 2. Utilisez la commande "v-show" pour définir l'affichage ; L'attribut style de l'élément DOM contrôle la visibilité.

Comment masquer des éléments dans la vue

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

vue contrôle l'affichage et le masquage des éléments

Solution :

La directive v-if et la directive v-show peuvent contrôler dynamiquement l'affichage et le masquage des éléments DOM en fonction de la valeur, v-if et v-show C'est une instruction couramment utilisée dans Vue. La responsabilité de l'instruction est d'appliquer certains comportements spéciaux au DOM lorsque la valeur de l'expression change.

  • v-if supprimera directement l'élément

  • v-show le masquera simplement et basculera simplement l'affichage des attributs CSS de l'élément.

   <p v-show="showGroup">
        <p class="formTitle">图层组</p >
    </p >
Copier après la connexion

Par exemple, si vous souhaitez masquer le p ci-dessus, ajoutez un attribut v-show à ce p. Vous pouvez le nommer comme vous le souhaitez

, puis définir la valeur par défaut de showGroup sur false dans le code js, c'est-à-dire qu'au premier démarrage, il ne sera pas affiché par défaut si vous souhaitez afficher ce p plus tard. , vous pouvez définir directement vm.showGroup=true Can

Recommandations associées : "tutoriel vue.js"

.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal