Die v-for-Direktive in Vue vervollständigt die Listendarstellung
|
Dieser Artikel fasst die Listendarstellung in Vue kurz zusammen und demonstriert sie: Die Listendarstellung erfolgt mithilfe 1. ListendurchlaufDer grundlegendste Anwendungsfall 1:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Listendarstellung</title>
<script src="../../js/vue.js"></script>
</Kopf>
<Text>
<div id="app">
<ul>
<li v-for="(Name,Index) in Namen">
{{index}}-{{name}}
</li>
</ul>
</div>
</body>
<Skript>
neuer Vue({
el:'#app',
Daten() {
zurückkehren {
Namen: ['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu']
}
},
})
</Skript>
</html>
v-for kann auch über Objekte, Zeichenfolgen, angegebene Zahlen und mehr iterieren. wie:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Listendarstellung</title>
<script src="../../js/vue.js"></script>
</Kopf>
<Text>
<div id="app">
<!-- Objekt durchlaufen-->
<ul>
<li v-for="(Eigenschaft,Schlüssel) in Student">
{{Schlüssel}}:{{Eigenschaft}}
</li>
</ul>
<!-- Zeichenfolge durchlaufen-->
<ol>
<li v-for="char in str">{{char}}</li>
</ol>
<!-- Benutzerdefinierte Ausgabe -->
<ul>
<li v-for="Anzahl in 10">
{{num}}
</li>
</ul>
</div>
</body>
<Skript>
neuer Vue({
el:'#app',
Daten() {
zurückkehren {
Student:
Name: „Li Ming“,
Alter:23,
Adresse: 'Dalian'
},
str:'HalloWord'
}
},
})
</Skript>
</html>Die Wirkung des obigen Codes ist wie folgt:
2. Die Rolle des Schlüssels in VueWirkung:
Regeln zum Vergleichen von Unterschieden:
3. ListenfilterungBeim Listenfiltern werden die Listenelemente vor dem Durchlaufen der Liste gefiltert und die Elemente ausgewählt, die die Anzeigeanforderungen erfüllen, z. B.: Angenommen, wir möchten Personen mit dem Namen „Zhang San“ aus der Liste herausfiltern: (Dies kann mithilfe der Computer- oder Überwachungsattribute erreicht werden.)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Listendarstellung</title>
<script src="../../js/vue.js"></script>
</Kopf>
<Text>
<div id="app">
<!-- Listenfilter -->
<!-- Computermethode -->
<ul>
<li v-for="(name,intdex) in showNames">{{name}}</li>
</ul>
<!-- Überwachungsmethode -->
<ol>
<li v-for="(name,index) in displayName">{{name}}</li>
</ol>
</div>
</body>
<Skript>
neuer Vue({
el:'#app',
Daten() {
zurückkehren {
Namen:['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu'],
Anzeigename:[],
}
},
betrachten:
Name:{
sofort:wahr,
handler(Wert){
this.displayName=this.names.filter((n)=>{
return n!='Zhang San'
})
}
}
},
berechnet: {
// Wenn wir Personen mit dem Namen „Zhang San“ herausfiltern möchten, showNames(){
gib diesen.Namen.Filter zurück((n)=>{
return n!="Zhang San"
})
}
},
})
</Skript>
</html>Wirkung:
Dies ist das Ende dieses Artikels über die Verwendung der v-for-Direktive in Vue zum Abschließen der Listendarstellung. Weitere Informationen zur v-for-Direktive in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Mobile Frontend-Anpassungslösung (Zusammenfassung)
>>: Allgemeine Parameter für Popup-Fenster von IE-Webseiten können Sie selbst festlegen
Artikel empfehlen
Springboot verwendet die Front-End- und Back-End-Interaktion von Vue + Echarts, um dynamische Donut-Diagramme zu realisieren
Inhaltsverzeichnis Vorwort 1. Umgebungskonfigurat...
Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL
Spezifische Methode: 1. Öffnen Sie die Eingabeauf...
Lösen Sie das Problem der Datensynchronisierung beim Scrollen und Liken von Vue-Seamless-Scroll
VUE verwendet vue-seamless-scroll zum automatisch...
Beispiel für die MySQL-Triggeroperation „Hinzufügen“, „Löschen“, „Ändern“ und „Abfragen“
In diesem Artikel werden anhand von Beispielen di...
Einführung in die Anwendung der HTML-Tags superscript sup und subscript sub
HTML-Tag: hochgestellt In HTML definiert das <s...
Zusammenfassung der Installationsschritte und aufgetretenen Probleme beim Dekomprimieren der Version mysql5.7.24
1. Herunterladen https://dev.mysql.com/downloads/...
Detaillierte Erklärung des Vue2 Cube-UI-Zeitwählers
Inhaltsverzeichnis Vorwort 1. Anspruch und Wirkun...
CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial
1. Deinstallieren Sie zuerst das mit CenterOS gel...
Eine kurze Diskussion über die Implementierung von Fuzzy-Abfragen mit Platzhaltern in MySQL
Wenn wir in der MySQL-Datenbank Fuzzy-Abfragen be...
Beispielcode zum Anzeigen von Erinnerungspunkten in der oberen linken oder oberen rechten Ecke mithilfe von CSS3
Effektbild (wenn Sie ein Dreieck wünschen, klicke...
Einführung in die Verwendung von Ankern (benannte Anker) in HTML-Webseiten
Die folgenden Informationen sind aus dem Internet ...
Beheben Sie das Problem, dass nach der Installation von Centos7 in VMware kein Ping an das externe Netzwerk möglich ist
Beim Konfigurieren eines Clusters ist ein Problem...
Detaillierte Erläuterung der Konfigurationsmethode „Groß-/Kleinschreibung ignorieren“ für MySQL-Tabellennamen
Standardmäßig unterscheidet MySQL unter Linux zwi...
Beispiel für das Abrufen der neuesten Daten mithilfe einer MySQL-Mehrtabellenassoziations-Eins-zu-viele-Abfrage
Dieser Artikel beschreibt anhand eines Beispiels,...
Wie InnoDB Transaktionsisolationsebenen geschickt implementiert
Vorwort Im vorherigen Artikel „Detaillierte Erklä...