Fähigkeiten zum bedingten Rendern von Vue enthüllt: Lernen Sie, v-if, v-show, v-else und v-else-if zu verwenden, um eine flexible Steuerung zu erreichen

Vue-Fähigkeiten für bedingtes Rendering enthüllt: Lernen Sie, v-if, v-show, v-else und v-else-if zu verwenden. Um eine flexible Steuerung zu erreichen, benötigen Sie spezifische Codebeispiele

In Vue ist bedingtes Rendering sehr wichtig wichtige Aufgabe Eine wichtige Technik, mit der das Anzeigen und Ausblenden von Komponenten oder Elementen basierend auf bestimmten Bedingungen gesteuert werden kann. Vue bietet eine Vielzahl bedingter Rendering-Anweisungen, darunter v-if, v-show, v-else, v-else-if usw. Dieser Artikel befasst sich mit den Verwendungstechniken dieser Anweisungen und gibt spezifische Codebeispiele.

1. v-if-Anweisung
   Die v-if-Anweisung kann basierend auf dem Wert des Ausdrucks bestimmen, ob eine bestimmte Komponente oder ein bestimmtes Element gerendert werden soll. Wenn der Wert des Ausdrucks wahr ist, wird der entsprechende Inhalt gerendert; wenn der Wert des Ausdrucks falsch ist, wird der entsprechende Inhalt nicht gerendert. Hier ist ein Beispiel:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

In diesem Beispiel verwenden wir die v-if-Direktive, um basierend auf dem Wert von showHeading zu bestimmen, ob der Titel angezeigt werden soll. Wenn der Wert von showHeading wahr ist, wird der Titel gerendert; wenn der Wert von showHeading falsch ist, wird der Absatz mit dem ausgeblendeten Titel gerendert.

2. v-show-Befehl
   Der v-show-Befehl hat eine ähnliche Funktion wie der v-if-Befehl. Er kann auch das Anzeigen und Ausblenden von Komponenten oder Elementen basierend auf dem Wert eines Ausdrucks steuern. Im Gegensatz zu v-if fügt v-show DOM-Elemente nicht basierend auf Bedingungen hinzu oder entfernt sie, sondern steuert das Anzeigen und Ausblenden von Elementen über CSS-Stile. Hier ist ein Beispiel:

<template>
  <div>
    <h1 v-show="showHeading">显示标题</h1>
    <p v-show="!showHeading">隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

In diesem Beispiel verwenden wir den Befehl v-show, um die Anzeige und das Ausblenden des Titels basierend auf dem Wert von showHeading zu steuern. Im Vergleich zu v-if ist die Logik von v-show einfacher, da sie nur das Anzeigen und Ausblenden von Elementen über CSS-Stile steuert.

3. v-else-Direktive
   Die v-else-Direktive muss zusammen mit der v-if- oder v-show-Direktive verwendet werden, um die entgegengesetzte Bedingung zur v-if- oder v-show-Direktive auszudrücken. Hier ist ein Beispiel:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Wenn in diesem Beispiel der Wert von showHeading wahr ist, wird das Element mit dem angezeigten Titel gerendert; wenn der Wert von showHeading falsch ist, wird der Absatz mit dem ausgeblendeten Titel gerendert .

4. v-else-if-Anweisung
   Die v-else-if-Anweisung muss auch zusammen mit der v-if- oder v-show-Anweisung verwendet werden, um die Beurteilung mehrerer Bedingungen auszudrücken. Es kann verwendet werden, um mehrere v-else if-Anweisungen zu ersetzen. Hier ist ein Beispiel:

<template>
  <div>
    <h1 v-if="rating >= 9">优秀</h1>
    <h2 v-else-if="rating >= 6">良好</h2>
    <h3 v-else-if="rating >= 3">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 8
    };
  }
};
</script>

In diesem Beispiel verwenden wir basierend auf dem Wert der Bewertung die Anweisungen v-if und v-else-if, um die Bewertungsstufe zu bestimmen und verschiedene Titel entsprechend darzustellen. Wenn der Bewertungswert größer oder gleich 9 ist, wird ein ausgezeichneter Titel vergeben. Wenn der Bewertungswert größer oder gleich 6 ist, wird ein guter Titel vergeben, wenn der Bewertungswert größer oder gleich 3 ist. ein bestandener Titel wird vergeben; wenn der Bewertungswert größer oder gleich 3 ist, wird ein bestandener Titel vergeben; wenn der Wert kleiner als 3 ist, wird der unqualifizierte Titel vergeben.

Zusammenfassung:
Durch das Erlernen und Verwenden bedingter Rendering-Anweisungen wie v-if, v-show, v-else und v-else-if können wir das Anzeigen und Ausblenden von Komponenten und Elementen basierend auf Bedingungen flexibel steuern. Entsprechend den spezifischen Geschäftsanforderungen kann die Auswahl geeigneter Anweisungen zur Implementierung des bedingten Renderings unseren Code prägnanter und lesbarer machen. Ich hoffe, dass die in diesem Artikel bereitgestellten Codebeispiele Ihnen helfen können, die bedingten Rendering-Techniken von Vue besser zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonFähigkeiten zum bedingten Rendern von Vue enthüllt: Lernen Sie, v-if, v-show, v-else und v-else-if zu verwenden, um eine flexible Steuerung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!