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!
