Maison > Article > interface Web > Comparez les instructions Vue v-show et v-if et parlez des scénarios d'utilisation
Cet article compare les commandes Vuev-show et v-if, présente la différence entre v-show et v-if et parle des scénarios d'utilisation de v-show et v-if. J'espère qu'il sera utile. à tout le monde !
En vue, v-show et v-if peuvent contrôler si les éléments sont affichés sur la page.
L'affichage et le masquage de v-show consistent à faire fonctionner l'attribut d'affichage de l'élément CSS, donc lorsque vous utilisez v-show pour masquer l'élément, le nœud dom de l'élément est toujours dans la page et se cache ; de v-if consiste à masquer l'élément dom Ajout ou suppression complète. [Recommandations associées : Tutoriel vidéo vuejs]
La commutation de v-if a un processus de compilation/désinstallation partielle. Pendant le processus de commutation, les écouteurs d'événements internes et les sous-composants sont correctement détruits et reconstruits ; est juste une simple opération d'attribut d'affichage CSS.
v-if est un véritable rendu conditionnel, qui garantit que les écouteurs d'événements et les sous-composants du bloc conditionnel sont détruits et recréés de manière appropriée pendant le changement. Ce n'est que lorsque la condition de rendu est fausse qu'aucune opération n'est effectuée et elle n'est rendue que lorsqu'elle est vraie.
v-show ne déclenchera pas le cycle de vie du composant lorsqu'il passe de faux à vrai. Lorsque v-if passe de faux à vrai, il déclenchera les hooks de cycle de vie beforeCreate, create, beforeMount et montés du composant, qui passera de true à true Lorsqu'il est faux, les méthodes beforeDestory et destroy du composant sont déclenchées.
En termes de consommation de performances, v-if a une consommation de commutation plus élevée ; v-show a une consommation de rendu initiale plus élevée.
v-if et v-show peuvent contrôler l'affichage et le masquage des éléments dom sur la page
v-if par rapport à v- showoverPour les plus grands (opérer directement l'ajout et la suppression de nœuds dom), si vous devez changer très fréquemment, il est préférable d'utiliser v-show. Si les conditions changent rarement pendant l'exécution, il est préférable d'utiliser v-if.
export const vShow: ObjectDirective<VShowElement> = { beforeMount(el, { value }, { transition }) { el._vod = el.style.display === 'none' ? '' : el.style.display if (transition && value) { transition.beforeEnter(el) } else { setDisplay(el, value) } }, mounted(el, { value }, { transition }) { if (transition && value) { transition.enter(el) } }, updated(el, { value, oldValue }, { transition }) { // ... }, beforeUnmount(el, { value }) { setDisplay(el, value) } }
export const transformIf = createStructuralDirectiveTransform( /^(if|else|else-if)$/, (node, dir, context) => { return processIf(node, dir, context, (ifNode, branch, isRoot) => { // ... return () => { if (isRoot) { ifNode.codegenNode = createCodegenNodeForBranch( branch, key, context ) as IfConditionalExpression } else { // attach this branch's codegen node to the v-if root. const parentCondition = getParentCondition(ifNode.codegenNode!) parentCondition.alternate = createCodegenNodeForBranch( branch, key + ifNode.branches.length - 1, context ) } } }) } )
(Partage vidéo d'apprentissage : tutoriel vuejs, front-end web)
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!