Wie versteht man bedingtes Rendering in Vue.js? (Codebeispiel)

In diesem Tutorial lernen wir, das bedingte Rendering in Vue.js zu verstehen.

Was ist bedingtes Rendern?

Bedingtes Rendern bedeutet, dass, wenn eine bestimmte Bedingung wahr ist, aus dom Hinzufügen oder Elemente aus entfernen.

In Vue müssen wir die v-if-Direktive verwenden, um das Element bedingt darzustellen.

Sehen wir uns ein Beispiel an:

<template>
  <div>
  <!-- v-if="javascript expression" -->
   <h1 v-if="isActive">Hello Vuejs</h1>
   <button @click="isActive= !isActive">点击</button>
  </div>
</template>

<script>

export default{
    data:function(){
        return{
            isActive:false
        }
    }
}
</script>

Im obigen Code haben wir eine isActive-Direktive mit dem Attribut v-if hinzugefügt. Wenn das isActive-Attribut also true ist, h1-Elemente werden nur in dom gerendert.

Wir können die v-if-Direktive auch nach der v-else-Direktive erweitern.

 <h1 v-if="isActive">Hello Vuejs</h1>
   <h1 v-else>Hey Vuejs</h1>

Wenn das isActive-Attribut wahr ist, wird das erste h1-Element gerendert, andernfalls wird das zweite h1-Element in dom gerendert.

Wir können es auch mit dem v-else-if-Block weiter erweitern.

<h1 v-if="isActive">Hello Vuejs</h1>
   <h1 v-else-if="isActive && a.length===0">You&#39;re vuejs</h1>
   <h1 v-else>Hey Vuejs</h1>

In JavaScript funktioniert die v-else-if-Direktive wie ein else-if-Block.

Hinweis: Auf ein v-else-Element muss unmittelbar ein v-if-Element oder ein v-if-else-Element folgen, sonst wird es nicht erkannt.

Wie rendere ich mehrere Elemente bedingt?

Manchmal müssen wir mehrere Elemente bedingt rendern, in diesem Fall müssen wir die Elemente in Together kombinieren.

<template>
  <div v-if="available">
    <h1>Items are available</h1>
    <p>More items in the stock</p>
  </div>
  <div v-else>
    <h1>Items are not available</h1>
    <p>Out of stock</p>
  </div>
</template>

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

Hier gruppieren wir mehrere Elemente innerhalb des div-Tags.

Verwandte Empfehlungen: „Javascript-Tutorial“

In diesem Artikel geht es um die detaillierte Erklärung des bedingten Renderings in Vue.js I Ich hoffe, es hilft Freunden, die Hilfe brauchen!

Das obige ist der detaillierte Inhalt vonWie versteht man bedingtes Rendering in Vue.js? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!