So verwenden Sie v-if und v-else-if, um in Vue mehrere bedingte Renderings zu erreichen

Vue ist ein sehr beliebtes JavaScript-Framework, mit dem nicht nur Single-Page-Anwendungen (SPA) erstellt werden können, sondern auch komplexe Benutzeroberflächen. Die Anweisungen v-if und v-else-if in Vue sind zwei wichtige Anweisungen zum bedingten Rendern von Ansichten. In diesem Artikel wird erläutert, wie diese beiden Anweisungen zum Implementieren mehrerer bedingter Renderings verwendet werden.

1. Einführung in die V-IF-Anweisung

Die V-IF-Anweisung ist eine der am häufigsten verwendeten Anweisungen in Vue. Sie wird zum bedingten Rendern von Elementen basierend auf dem Wert eines Ausdrucks verwendet. Wenn der Ausdruck „true“ ergibt, wird das Element gerendert, andernfalls wird das Element nicht gerendert.

Der folgende Code demonstriert beispielsweise die Verwendung der v-if-Anweisung, um zu bestimmen, ob eine Zahl größer als 10 ist. Wenn die Zahl größer als 10 ist, wird die Beschriftung „Zahl größer als 10“ angezeigt, andernfalls wird die Beschriftung angezeigt nicht angezeigt:

<template>
  <div>
    <p v-if="num > 10">数字大于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 20
    }
  }
}
</script>

Die Methode data here ( ) gibt ein Objekt zurück, das ein Num-Attribut enthält, dessen Anfangswert 20 ist. Daher wird beim Rendern das Ergebnis des Ausdrucks „num > 10“ als wahr beurteilt, sodass eine Beschriftung gerendert wird und der Text in der Beschriftung „Zahl größer als 10“ lautet.

2. Einführung in die v-else-if-Anweisung

Die v-else-if-Anweisung wird auch für bedingte Rendering-Elemente verwendet. Es muss als „nachfolgendes gleichgeordnetes Element“ der v-if-Direktive verwendet werden, um zu bestimmen, ob das Element basierend auf dem Wert des Ausdrucks gerendert werden soll. Wenn der Ausdruck der vorherigen v-if-Direktive „false“ ergibt, prüft die v-else-if-Direktive, ob ihr Ausdruck wahr ist, und rendert das Element, wenn es wahr ist.

Der folgende Code zeigt beispielsweise, wie die Anweisungen v-if und v-else-if verwendet werden, um mehrere bedingte Renderings zu implementieren:

<template>
  <div>
    <p v-if="num > 30">数字大于30</p>
    <p v-else-if="num > 20">数字大于20</p>
    <p v-else-if="num > 10">数字大于10</p>
    <p v-else>数字小于等于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 15
    }
  }
}
</script>

Hier wird eine Zahl num mit einem Anfangswert von 15 definiert. Mehrere v-if- und v-else-if-Anweisungen werden verwendet, um zu entscheiden, ob die Beschriftung basierend auf dem Wert von num angezeigt werden soll. Stellen Sie zunächst fest, ob num größer als 30 ist. Wenn ja, zeigen Sie die Beschriftung „Zahl größer als 30“ an. Andernfalls ermitteln Sie, ob num größer als 20 ist. Wenn ja, zeigen Sie die Beschriftung „Zahl größer als 20“ an und so weiter.

Da in diesem Beispiel der Wert von num 15 ist, sind die ersten beiden Bedingungen nicht erfüllt, aber die dritte Bedingung ist erfüllt, sodass die Bezeichnung „Zahl größer als 10“ gerendert wird.

3. Implementierung mehrerer bedingter Renderings

Wenn mehrere Bedingungen beurteilt werden müssen, können wir die Anweisungen v-if und v-else-if in Kombination verwenden, um mehrere bedingte Renderings zu implementieren. Der folgende Code zeigt, wie die Anweisungen v-if und v-else-if verwendet werden, um verschiedene Elemente basierend auf unterschiedlichen Bedingungen darzustellen:

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 75
    }
  }
}
</script>

In diesem Beispiel wird basierend auf der Punktzahl unterschiedlicher Text angezeigt. Wenn die Punktzahl größer oder gleich 90 Punkte ist, wird „Ausgezeichnet“ angezeigt; wenn die Punktzahl größer oder gleich 80 Punkten ist, wird „Gut“ angezeigt, wenn die Punktzahl größer oder gleich 60 Punkten ist „ wird angezeigt; andernfalls wird „Fehlgeschlagen“ angezeigt.

4. Zusammenfassung

Die Anweisungen v-if und v-else-if sind zwei sehr wichtige Anweisungen in Vue, die zum bedingten Rendern von Elementen verwendet werden können. Bei gemeinsamer Verwendung können Sie verschiedene Elemente basierend auf unterschiedlichen Bedingungen rendern, wie im Beispielcode. Dieser Ansatz ermöglicht uns eine übersichtlichere Organisation der Programme und erleichtert die Wartung.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie v-if und v-else-if, um in Vue mehrere bedingte Renderings zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!