Erweiterte Anwendungskenntnisse des bedingten Renderings von Vue: Verwenden Sie gekonnt v-if, v-show, v-else, v-else-if, um komplexe Schnittstellen zu erstellen

Erweiterte Anwendungsfähigkeiten des bedingten Renderings von Vue: Verwenden Sie gekonnt v-if, v-show, v-else, v-else-if, um komplexe Schnittstellen zu erstellen

Einführung:
Vue ist ein beliebtes JavaScript-Framework, das Entwicklern helfen kann Erstellen Sie reaktionsfähige Benutzeroberflächen. Vue bietet leistungsstarke bedingte Rendering-Funktionen, einschließlich Anweisungen wie v-if, v-show, v-else und v-else-if. Diese Anweisungen können Elemente entsprechend den Bedingungen dynamisch rendern oder anzeigen und so die Anzeige und Interaktion komplexer Schnittstellen realisieren.

In diesem Artikel wird erläutert, wie Sie mit den Anweisungen v-if, v-show, v-else und v-else-if komplexe Schnittstellen implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. v-if: Die
   v-if-Direktive wird zum Rendern eines Elements oder einer Komponente verwendet, das nur gerendert wird, wenn die Bedingung wahr ist. Beispielsweise können wir verschiedene Komponenten basierend auf dem Anmeldestatus des Benutzers anzeigen:

<template>
  <div>
    <div v-if="isLoggedIn">
      用户已登录
    </div>
    <div v-else>
      用户未登录
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

2. v-show: Die
   v-show-Direktive wird auch verwendet, um Elemente basierend auf Bedingungen anzuzeigen oder auszublenden, jedoch durch Modifizieren die CSS-Eigenschaften des Elements, anstatt das Element tatsächlich im DOM zu rendern. Dies bedeutet, dass der Befehl v-show beim Umschalten zwischen Anzeigen und Ausblenden eine bessere Leistung erbringt. Im folgenden Beispiel können wir verschiedene Schaltflächen basierend auf den Berechtigungen des Benutzers anzeigen:

<template>
  <div>
    <button v-show="isAdmin">删除</button>
    <button v-show="!isAdmin">只读</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false
    };
  }
};
</script>

3. v-else und v-else-if: Die
   v-else-Direktive wird verwendet, um zwischen benachbarten Elementen der v-if-Direktive zu wechseln , was „sonst“ bedeutet. Die v-else-Direktive muss unmittelbar auf die v-if-Direktive folgen und es können keine anderen Elemente oder Anweisungen in sie eingefügt werden. Beispielsweise können wir je nach Altersgruppe des Benutzers unterschiedliche Anzeigen anzeigen:

<template>
  <div>
    <div v-if="age < 18">
      <img  src="/static/imghw/default1.png"  data-src="kids-ad.jpg"  class="lazy" alt="Erweiterte Anwendungskenntnisse des bedingten Renderings von Vue: Verwenden Sie gekonnt v-if, v-show, v-else, v-else-if, um komplexe Schnittstellen zu erstellen" >
    </div>
    <div v-else-if="age < 40">
      <img  src="/static/imghw/default1.png"  data-src="adults-ad.jpg"  class="lazy" alt="Erweiterte Anwendungskenntnisse des bedingten Renderings von Vue: Verwenden Sie gekonnt v-if, v-show, v-else, v-else-if, um komplexe Schnittstellen zu erstellen" >
    </div>
    <div v-else>
      <img  src="/static/imghw/default1.png"  data-src="elderly-ad.jpg"  class="lazy" alt="Erweiterte Anwendungskenntnisse des bedingten Renderings von Vue: Verwenden Sie gekonnt v-if, v-show, v-else, v-else-if, um komplexe Schnittstellen zu erstellen" >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 25
    };
  }
};
</script>

Es ist zu beachten, dass die v-else-if-Anweisung der v-if- oder v-else-if-Anweisung folgen muss und keine anderen Elemente enthalten darf oder es werden darin Anweisungen eingefügt.

Fazit:
Vues bedingte Rendering-Funktion bietet eine Vielzahl von Anweisungen, wie z. B. v-if, v-show, v-else und v-else-if, um Elemente entsprechend unterschiedlichen Bedingungen dynamisch zu rendern und anzuzeigen. In diesem Artikel wird die Verwendung dieser Anweisungen detailliert beschrieben und spezifische Codebeispiele bereitgestellt. Durch den geschickten Einsatz dieser Anweisungen können Entwickler komplexe Schnittstellen einfach anzeigen und damit interagieren.

Kurz gesagt ist die bedingte Rendering-Funktion von Vue eines der wichtigen Werkzeuge für die Entwicklung komplexer Schnittstellen und es lohnt sich, sie für Entwickler zu erlernen und zu beherrschen.

(Wortanzahl: 455)

Das obige ist der detaillierte Inhalt vonErweiterte Anwendungskenntnisse des bedingten Renderings von Vue: Verwenden Sie gekonnt v-if, v-show, v-else, v-else-if, um komplexe Schnittstellen zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!