So verbergen Sie Inhalte in Vue

So verbergen Sie Inhalte in Vue: 1. Fügen Sie „v-show“ zum Inhalts-Div hinzu, das ausgeblendet oder angezeigt werden soll. 2. Fügen Sie ein Klickereignis zum Div des Iconfont-Symbols hinzu und Namensattribut hinzufügen; 4. Effektstil zum Ausblenden hinzufügen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Wie verstecke ich Inhalte in Vue?

vue erkennt die Funktion, auf ein bestimmtes Div zu klicken, um Inhalte anzuzeigen und auszublenden

1 Fügen Sie zunächst V-Show zu dem Inhalts-Div hinzu, das ausgeblendet oder angezeigt werden muss, was bedeutet, dass beurteilt werden soll, ob es angezeigt oder ausgeblendet werden soll

<div  v-show="shopShow">内容</div>

2. Ich bin hier. Es gibt ein ×-Zeichen im geöffneten Inhalt, um den Anzeigeeffekt zu deaktivieren und ein Klickereignis zum Div des Iconfont-Symbols hinzuzufügen. In der Export-Standardeinstellung lautet der Code wie folgt

<div  @click="toggleShopShow">
            <span class="iconfont icon-close"></span>
</div>

, um dies zu erreichen

4. Fügen Sie einen Übergangsanimationseffekt hinzu, um ihn auszublenden. Gehen Sie wie folgt vor:

Wickeln Sie den Übergang ein

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Inhalte in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!