Heim > Web-Frontend > View.js > Eine kurze Analyse der Listenrendering-Anweisungen von Vue: v-for

Eine kurze Analyse der Listenrendering-Anweisungen von Vue: v-for

青灯夜游
Freigeben: 2022-10-24 21:40:50
nach vorne
1965 Leute haben es durchsucht

Dieser Artikel führt Sie durch den Listenrendering-Befehl von Vue: v-for. Ich hoffe, er wird Ihnen hilfreich sein!

Eine kurze Analyse der Listenrendering-Anweisungen von Vue: v-for

Vues Listenwiedergabe

1.1.v-for

⭐⭐
Ich persönlich bin der Meinung, dass es sich tatsächlich um eine for-Schleife mit grundlegender Syntax handelt. Die Verwendung ist ähnlich, aber die Form ist anders. Wenn Sie es verstehen, können Sie es verwenden. (Lernvideo-Sharing: vue-Video-Tutorial)

Verwendung:

v-for="item in 数组"
Nach dem Login kopieren
Beispiel für das Durchlaufen eines Arrays:

v-for="(item, index) in 数组"
Nach dem Login kopieren
, und unterstützt einen, zwei oder drei Parameter:

Ein Parameter: „Wert im Objekt“;

Zwei Parameter: „(Wert, Schlüssel) im Objekt“;

    Drei Parameter: „(Wert, Schlüssel, Index) im Objekt
  • v-for unterstützt auch das Durchlaufen von Zahlen:
  • Jedes Element ist eine Zahl
  • <div class="item" v-for="item in products">
        <h3 class="title">商品:{{item.name}}</h3>
        <span>价格:{{item.price}}</span>
        <p>秒杀:{{item.desc}}</p>
    </div>
    
    const app = Vue.createApp({
            data() {
              return {
                //2.数组 存放的是对象
                products: [
                  { id: 11, name: "mac", price: 1000, desc: "99" },
                ],
              };
            },
          });
    
    app.mount("#app");
    Nach dem Login kopieren
  • 3 templ-Element zum Durchlaufen des Renderns eines Inhalts, der mehrere Elemente enthält


Warum hier nicht div verwenden?

Ich habe vorher nicht viel darüber nachgedacht, als ich meine Notizen organisiert habe.

Der Grund:

Wenn es in Div verpackt ist, wird es auch so sein rendered

Und wenn es von template umschlossen ist, wird die Vorlage nicht gerendert, was die Verwendung eines unnötigen div-Tags im Vergleich zur Verwendung von div erspart.

Tatsächlich ist die Vorlage ein Vorlagenplatzhalter, der uns beim Umschließen von Elementen helfen kann. Während des Schleifenprozesses wird die Vorlage nicht auf der Seite gerendert.

div (wenn das div keine tatsächliche Bedeutung hat, können Sie eine Vorlage verwenden, um es zu ersetzen)

  • <!-- 2.遍历对象 -->
          <ul>
            <li v-for="(value,key,index) in info">
              {{value}} - {{key}} - {{index}}
            </li>
          </ul>
     
     const app = Vue.createApp({
            data() {
              return {
                info: { bame: "why", age: 18, height: 1.88 },
              };
            },
          });
    app.mount("#app");
    Nach dem Login kopieren
  • template

<li v-for="item in 100">{{item}}</li>
Nach dem Login kopieren

    1.3.v – für Array-Update. Erkennung
  • ⭐⭐
  • Vue umschließt die Änderungsmethoden des abgehörten Arrays, sodass sie auch Ansichtsaktualisierungen auslösen

Zu den umschlossenen Methoden gehören : push(), das Elemente nach dem Array einfügt

pop() Löschen ein Element von der Rückseite des Arrays

shift() Ein Element von der Vorderseite des Arrays löschen unshift() Ein Element von der Vorderseite des Arrays einfügen

splice() Das Array ausschneiden, einfügen und löschen

sort() Sortieren

reverse() reverse
  • Die Verwendung dieser Methoden ist in js tatsächlich ähnlich. Wenn Sie darüber nachdenken, schauen Sie noch einmal nach
  • Methode zum Ersetzen von Arrays
  • Die obige Methode wird Ändern Sie direkt das ursprüngliche Array;
  • Einige Methoden ersetzen jedoch nicht das ursprüngliche Array, sondern generieren ein neues Array, z. B. filter(), concat() und Slice();
  • <div v-for="(value,key,index) in infos">
            <span>{{value}}</span>
            <strong>{{key}}</strong>
            <i>{{index}}</i>
    </div>
    Nach dem Login kopieren
  • [Empfehlung für ein entsprechendes Video-Tutorial:
Einführungs-Tutorial zu vuejs

Erste Schritte mit dem Web-Frontend

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Listenrendering-Anweisungen von Vue: v-for. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage