So verarbeiten Sie Arrays über v-for in vue

In diesem Artikel wird hauptsächlich ein Fehlerproblem vorgestellt, das beim Ausführen von vue-berechneten Eigenschaften und v-for bei der Verarbeitung von Arrays auftritt. Freunde in Not können sich auf das

Problem beziehen

Fehler: Möglicherweise gibt es eine Endlosaktualisierungsschleife in der Endlosschleife einer Komponentenrenderfunktion

1. Zu verarbeitendes Array (in ** ssq **):

bonus_code: ['01', '19', '25', '26', '27', '33', '10']

2. Berechnetes Attribut berechnet:

ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}

3.v-für Code:

<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>

4 Das Endergebnis ist, dass ich die ersten 6 Zahlen des Arrays in rote Kugeln rendern möchte, und der letzte (d. h. der siebte) wird blau dargestellt.

Antwort

Ich habe eine Frage zu SegmentFault gestellt, Adresse: vue berechnetes Attribut berechnet betreibt gleichzeitig ein Array

Ich habe die Antwort übernommen und den Code in geändert :

ssqRed: function() {
 return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
 return this.ssq.bonus_code.slice(6, 7)
}

Das Problem ist, dass ich nicht verstanden habe, dass Splice das ursprüngliche Array ändern würde.

Als ich nach einer Lösung suchte, brachte mir mein Freund Shaohui eine bessere Lösung bei

das heißt, die Beurteilung des Klassennamens

1. Wenn die Größe des Arrays bekannt ist, treffen Sie eine Beurteilung des Klassennamens und zeigen Sie den blauen Klassennamen an, wenn der Index größer als der Index ist:

<em v-for="(item, index) in ssq.bonus_code" :class="[&#39;tac&#39;,&#39;mr5&#39;,&#39;fl&#39;,index>5?&#39;blue-ball&#39;:&#39;red-ball&#39;]" >{{ item }}</em>

3. Code hinzugefügt:

index>5?'blue-ball':'red-ball'

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zur Verwendung von Datepicker in vue2.0

JavaScript-Mediator-Modus (ausführliches Tutorial)

Wie verwende ich Dom-Elemente in jQuery?

So lösen Sie das Problem der Fehlausrichtung der niceScroll-Bildlaufleiste in jQuery

Detaillierte Einführung in die Wissenspunkte zu Versprechen in js

So löschen Sie ein Element in einem JS-Array

So implementieren Sie die automatische Recyclingverbindung für MySQL-Transaktionen in Node.js

Verwenden Sie Nginx in vue.js, um domänenübergreifende Lösungen zu lösen

Das obige ist der detaillierte Inhalt vonSo verarbeiten Sie Arrays über v-for in vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!