Was sind die Gründe, warum die Verwendung von V-Show in VueJS nicht funktioniert?

Dieses Mal werde ich Ihnen die Gründe nennen, warum die Verwendung von v-show in vuejs nicht funktioniert Schau mal.

1. Beschreibung des offiziellen Website-Konzepts v-if ist „wahres“ bedingtes Rendering, da es sicherstellt, dass

Ereignis

-Listener und untergeordnete Komponenten innerhalb des bedingten Blocks während des Wechsels zerstört und entsprechend neu erstellt werden. v-if ist auch faul. Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – der bedingte Block beginnt nicht mit dem Rendern, bis die Bedingung zum ersten Mal wahr ist - - Unabhängig von den Ausgangsbedingungen wird das Element immer basierend auf CSS gerendert und umgeschaltet Im Allgemeinen hat v-if einen höheren Umschaltaufwand, während v-show einen höheren Rendering-Aufwand hat. Daher ist es besser, v-show zu verwenden, wenn die Bedingungen zur Laufzeit nicht gut sind ändern, ist es besser, v-if zu verwenden.

2. Übungsergebnisse

Auszug: Wenn Sie v-if verwenden, wird die gesamte Dom-Struktur überhaupt nicht auf der Seite angezeigt. Wenn Sie v-show verwenden, wird sie angezeigt , dann fügen Sie On style="<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:none" hinzu , if Für große Dinge wie Komponenten halte ich es persönlich für besser, v-if zu verwenden. Wenn es sich um etwas handelt, das vorübergehend ausgeblendet ist und später angezeigt wird, ist v-show bequemer. Beim Vergleich von v-style und v-show entspricht v-show der Abkürzung von v- und

".

style=”<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:none style=”display:none”v-style=”display:block1. V-Show funktioniert nicht

Kürzlich habe ich verwendet, um eine mehrseitige Anwendung zu entwickeln, und bin auf das Problem gestoßen, dass nicht funktioniert hat

a. Beschreibung des Problems vue_element-uiv-show, wie unten gezeigt (erwartete Auswirkung), in der sich die Daten der

Tabelle

dynamisch ändern, einschließlich des Titels, der sich ebenfalls entsprechend ändert zu den Hintergrunddaten. Wenn der vom Hintergrund zurückgegebene Titel leer ist, wird der Inhalt der Spalte nicht angezeigt. Andernfalls werden alle Daten der Spalte angezeigt Dann tritt der im Bild oben gezeigte Effekt auf, d. h. v-show konnte die Spaltendaten nicht ausblenden, da der Titelwert null war b. Lösung:

Ändern Sie v-show in v-if, um den Effekt in Abbildung 1 zu erzielen.

c. Zusammenfassung (persönliche Meinung):

Da el-table-column mehrzeilige Beschriftungselemente generiert, unterstützt v-show keine Vorlagensyntax. Daraus kann geschlossen werden, dass v-show nicht mehrere Elemente anzeigen oder ausblenden kann Es kann so verstanden werden, ich hoffe, Gott kann es mir sagen! In diesem Fall kann es also nur mit v-if erreicht werden Darüber hinaus können Sie beim Rendern mehrerer Elemente ein

-Element als Verpackungselement verwenden und v-if verwenden, um eine

bedingte Beurteilung durchzuführen Gleichzeitig Unterstützt die -Syntax nicht. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Eine Zusammenfassung dessen, was Sie wissen müssen, um Vue.js zu verbessern

<template>Detaillierte Erklärung von Vue berechnete Eigenschaftenv-show <template>

Das obige ist der detaillierte Inhalt vonWas sind die Gründe, warum die Verwendung von V-Show in VueJS nicht funktioniert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!