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
Erläuterung des Menüs „Entwicklertools“ in IE8
<br />In diesem Artikel wurden die verschied...
Mehrere Situationen, in denen Div durch Iframe abgedeckt ist, und ihre Lösungen
Ähnliche Strukturen: Code kopieren Der Code laute...
Verwendung und Szenarioanalyse des npx-Befehls in Node.js
Tutorial zur Verwendung von NPX Heute Abend, als ...
Detaillierte Schritte zur Installation von Nginx unter Linux
1. Nginx-Installationsschritte 1.1 Offizielle Web...
Kontinuierliche Bereitstellung mit Jenkins und Docker unter Docker
1. Was ist Continuous Delivery Der Ausgabeprozess...
Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm
Viele Freunde, die gerade angefangen haben, Websei...
Detaillierte Erklärung der CSS-Float-Eigenschaft
1. Was ist Floating? Floaten bedeutet, wie der Na...
So mounten Sie eine Festplatte in Linux
Wenn Sie eine virtuelle Maschine verwenden, stell...
Detaillierte Erläuterung des vite2.0-Konfigurationslernens (Typescript-Version)
einführen Die ursprünglichen Worte von You Yuxi. ...
Detaillierte Beschreibung des Lebenszyklus von React-Komponenten
Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....
Schritte zum Kauf eines Cloud-Servers und zur Installation des Pagoda Panels in der Alibaba Cloud
Alibaba Cloud kauft Server Kaufen Sie einen Cloud...
Detaillierte Erläuterung der Vorverarbeitungsmethode für WeChat-Applet-Anforderungen
Frage Da einige unserer Seiten Daten im Onload-Mo...
MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert
Wenn ein Thread eine DELAYED-Anweisung für eine T...
Einführung in die Stapelverarbeitung von virtuellen Netzwerkkarten unter CentOS 7.6
1 Überprüfen Sie, ob der Kernel ein Tun-Modul hat...
Detaillierte Erläuterung der MySQL-Multitabellen-Joinabfrage
Inhaltsverzeichnis Abfrage zum Verbinden mehrerer...