Heim > Artikel > Web-Frontend > Vergleichen Sie die Vue-Anweisungen v-show und v-if und sprechen Sie über Nutzungsszenarien
Dieser Artikel vergleicht die VueBefehle v-show und v-if, stellt den Unterschied zwischen v-show und v-if vor und spricht über die Verwendungsszenarien von v-show und v-if. Ich hoffe, dass er hilfreich ist an alle!
In Vue können sowohl v-show als auch v-if steuern, ob Elemente auf der Seite angezeigt werden.
Das Anzeigen und Ausblenden von V-Show dient dazu, das Anzeigeattribut des Element-CSS zu bedienen. Wenn Sie also V-Show zum Ausblenden des Elements verwenden, befindet sich der Dom-Knoten des Elements immer noch auf der Seite v-if dient dazu, das gesamte Hinzufügen oder Löschen des Dom-Elements auszublenden. [Verwandte Empfehlungen: vuejs-Video-Tutorial
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 ) } } }) } )
Das obige ist der detaillierte Inhalt vonVergleichen Sie die Vue-Anweisungen v-show und v-if und sprechen Sie über Nutzungsszenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!