Wie Uniapp bedingtes Rendering und Listenrendering verwendet

Uniapp verwendet bedingtes Rendern und Listen-Rendering: 1. Die Anweisung [v-if] wird zum bedingten Rendern eines Inhalts verwendet. 2. [v-show] zeigt Elemente entsprechend den Bedingungen an Rendert eine Liste basierend auf einem Array.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So verwenden Sie bedingtes Rendern und Listen-Rendering in Uniapp:

1. Bedingtes Rendering

1.v-if-Direktive wird zum bedingten Rendern verwendet Ein Stück Inhalt

Vue is awesome!
data:function() {
    return {
       awesome:true     //true或false
    }
}

2. Sie können auch v-else verwenden, um einen „else-Block“ hinzuzufügen

Vue is awesome!
Oh no
data:function() {
    return {
  awesome:true    //为true时正常显示，为false时显示Oh no
    }
}

3, der als „else-if-Block“ von v-if und can fungiert kontinuierlich verwendet werden

A
B
C
Not A/B/C
data:function() {
    return {
    type:'A'   //A或B或C  什么都不写的话则显示 Not A/B/C
    }
}

4. Zeigt Elemente entsprechend den Bedingungen an

Hello!
data:function() {
    return {
 ok:true    //为true时显示Hello!，为false时则不显示
    }
}

5. Der Unterschied zwischen v-if und v-show

v-if ist eine „echte“ bedingte Darstellung, die sicherstellt, dass die Ereignis-Listener und untergeordnete Komponenten im bedingten Block werden während des Umschaltvorgangs zerstört und entsprechend neu erstellt. (Verwenden Sie diese Option, wenn sich die Betriebsbedingungen selten ändern.)

v-show-Elemente werden immer gerendert und verbleiben im DOM. v-show schaltet einfach die CSS-Eigenschaftsanzeige des Elements um (none/block). (Beim häufigen Wechseln verwenden)

2. Listen-Rendering

1 Verwenden Sie den Befehl v-for, um eine Liste basierend auf einem Array zu rendern. Es ist eine spezielle Syntax des Formulars „item“ in „items“ erforderlich, wobei „items“ das Quelldatenarray und „item“ ein Alias ​​für das Array-Element ist, über das iteriert wird.

{{index}} : {{item.msg}}
data:function() {
return {
items:[
{msg:'Foo'},
{msg:'Bar'}
]
}
}

2. Verwenden Sie Objekte in v-for

{{key}} : {{value}}
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2020-3-10',
}

Die Ergebnisse der beiden oben genannten Beispiele sind wie folgt:

Verwandte kostenlose Lernempfehlungen: php-Programmierung (Video)

Das obige ist der detaillierte Inhalt vonWie Uniapp bedingtes Rendering und Listenrendering verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!