Die v-for-Direktive in Vue vervollständigt die Listendarstellung

Inhaltsverzeichnis

1. Listendurchlauf
2. Die Rolle des Schlüssels in Vue
3. Listenfilterung

Dieser Artikel fasst die Listendarstellung in Vue kurz zusammen und demonstriert sie:

Die Listendarstellung erfolgt mithilfe v-for Direktive basierend auf den Optionen zum Binden einer Reihe von Elementen, und das Darstellungsformat kann angepasst werden.

1. Listendurchlauf

Der 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>

Im obigen Beispiel: Durch die v-for-Direktive wird das Namensarray in Daten gebunden und die Elemente im Array werden in Form einer Liste durchlaufen, wobei Name ein durchlaufenes Element des aktuellen Arrays darstellt und Index der Index des aktuellen Elementnamens im Array ist. Der Ausgabeeffekt ist wie folgt:

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 Vue

Wirkung:

key ist die Kennung des virtuellen dom Objekts. Wenn sich die Daten ändern, generiert vue basierend auf den neuen Daten ein neues virtuelles DOM und vergleicht dann die Unterschiede zwischen dem neuen virtuellen DOM und dem alten virtuellen DOM.

Regeln zum Vergleichen von Unterschieden:

Suchen Sie zunächst im alten virtuellen Dom nach dem gleichen key wie im neuen virtuellen Dom
(1) Wenn sich der Inhalt im virtuellen dom nicht geändert hat, verwenden Sie direkt den vorherigen realen dom
(2) Wenn der Inhalt im virtuellen dom verloren geht, wird ein neuer realer dom generiert und dann der vorherige reale dom auf der Seite ersetzt.
Wenn derselbe Schlüssel wie im neuen virtuellen DOM nicht im alten virtuellen DOM gefunden wird, wird ein neues reales DOM erstellt und dann auf der Seite gerendert.

3. Listenfilterung

Beim 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:

Tiefgreifendes Verständnis des bedingten Renderings und Listen-Renderings von Vue
Eine kurze Analyse der Anweisungen zum bedingten Rendering in Vue.js
Bedingtes Rendering von Vue (v-if und v-show)
Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering
Detaillierte Erklärung der Listendarstellung von Vue
Detaillierte Erklärung zum Rendern, Sortieren und Filtern von Vue-Listen
Bedingtes Rendering und Listen-Rendering in Vue

<<: Mobile Frontend-Anpassungslösung (Zusammenfassung)

>>: Allgemeine Parameter für Popup-Fenster von IE-Webseiten können Sie selbst festlegen

Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache

CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen

Artikel

mysql 5.7.5 m15 winx64.zip Installations-Tutorial

Die v-for-Direktive in Vue vervollständigt die Listendarstellung

Inhaltsverzeichnis

1. Listendurchlauf

2. Die Rolle des Schlüssels in Vue

3. Listenfilterung

Vue kapselt ein TodoList-Beispiel und implementiert die Anwendung des lokalen Browser-Cache

Codebeispiele für die Dekomprimierung, Änderung und andere Betriebsmethoden von Linux-Deb-Paketen

So fügen Sie eine Popup-Aktionsschaltfläche unten für „Select“ und „Cascader“ von Element-UI hinzu

So laden Sie die Kamera in HTML

Detaillierte Schritte zum Einrichten des Netzwerks für die mit Win10 gelieferte virtuelle Maschine (grafisches Tutorial)

CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen

mysql 5.7.5 m15 winx64.zip Installations-Tutorial

Wie gestaltet man eine responsive Website? Vor- und Nachteile von Responsive Webdesign

Einrichten eines Docker-Proxys unter CentOS 7 (Konfiguration der Umgebungsvariablen des Systemd-Dienstes unter Linux)

Detaillierte Erläuterung der Methode zum Vergleichen von Daten in MySQL

Artikel empfehlen

Reine CSS-Implementierung (kein Skript) Tooltip-Textaufforderungseffekt im HTML-Befehlsstil

So finden Sie langsame SQL-Anweisungen in MySQL

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Detaillierter Prozess und häufige Probleme bei der VMware15-Installation von CentOS7 (Bild und Text)

Docker-Container kommunizieren direkt über Routing, um Netzwerkkommunikation zu erreichen

Tutorial zur Installation von VMware Workstation 14 Pro unter Ubuntu 16.04

Verwendung des Linux-SFTP-Befehls

Beispielcode zur Implementierung einer Mehrfachauswahl basierend auf einer verschachtelten Tabelle in ElementUI

Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?

Mehrere Möglichkeiten zum Wechseln zwischen Vue Tab und Cache-Seiten

Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10

Stabile Version von MySQL 8.0.18 veröffentlicht! Hash Join ist wie erwartet da

Datenstruktur - Baum (III): Mehrweg-Suchbaum B-Baum, B+ Baum

Vue-Beispielcode mit dem Animationseffekt „Übergangskomponente“

So installieren Sie mysql5.6 in Docker unter Ubuntu