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

Vue ist ein beliebtes JavaScript-Framework, das hauptsächlich zum Erstellen interaktiver Webanwendungen verwendet wird. In Vue können wir die Direktiven v-if, v-else-if und v-else verwenden, um mehrere bedingte Renderings zu implementieren.

Die v-if-Direktive wird zum Rendern von DOM-Elementen basierend auf Bedingungen verwendet. Das Element wird nur gerendert, wenn die Bedingung wahr ist. Die Anweisungen v-else-if und v-else werden verwendet, um mehrere Bedingungen in der v-if-Anweisung zu verwenden.

Im Folgenden stellen wir detailliert vor, wie Sie diese Anweisungen verwenden, um mehrere bedingte Renderings zu implementieren.

Verwenden Sie die v-if-Direktive

Um die v-if-Direktive zu verwenden, können wir sie dem DOM-Element hinzufügen, das bedingt beurteilt werden muss, und es an einen Ausdruck binden.

Zum Beispiel können wir eine Vue-Komponente ähnlich der folgenden erstellen:

<template>
  <div>
    <p v-if="showMessage">显示消息</p>
  </div>
</template>

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

In dieser Komponente verwenden wir die v-if-Direktive, um bedingt zu bestimmen, ob die Nachricht angezeigt werden soll. Wenn der Wert der Variablen showMessage wahr ist, wird dieses Element im DOM gerendert.

Wenn der Wert der showMessage-Variablen falsch ist, wird dieses Element nicht auf der Seite gerendert.

Verwenden Sie die Anweisungen „v-else-if“ und „v-else“

Manchmal müssen wir DOM-Elemente basierend auf mehreren Bedingungen rendern. Dann können wir die Anweisungen „v-else-if“ und „v-else“ verwenden.

Zum Beispiel können wir eine Komponente wie die folgende erstellen:

<template>
  <div>
    <p v-if="size === 'small'">这是小尺寸</p>
    <p v-else-if="size === 'large'">这是大尺寸</p>
    <p v-else>这是默认尺寸</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small'
    };
  }
};
</script>

In diesem Beispiel entscheiden wir anhand des Werts der Variablengröße, welches Element angezeigt werden soll. Wenn size gleich „small“ ist, wird nur das erste p-Element gerendert; wenn es gleich „large“ ist, wird nur das zweite p-Element gerendert, andernfalls wird nur das dritte p-Element gerendert.

Zusammenfassung

Vue bietet praktische V-If-, V-Else-If- und V-Else-Anweisungen, die es uns ermöglichen, DOM-Elemente basierend auf mehreren Bedingungen flexibel zu rendern. Mit diesen Anweisungen können wir leistungsstarke interaktive Anwendungen erstellen und diese bedingt rendern.

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