Comment traiter des tableaux via v-for dans vue

Cet article présente principalement un problème de bug rencontré lors de l'exécution des propriétés calculées de vue et de v-for lors du traitement des tableaux. Les amis dans le besoin peuvent se référer au

problème .

bug : Vous pouvez avoir une boucle de mise à jour infinie dans une boucle infinie de fonction de rendu de composant

1. Tableau à traiter (dans ** ssq **) :

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

<. 🎜>2. Attribut calculé :

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

3.v-pour le 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. Le résultat final dans lequel je souhaite restituer les 6 premiers nombres du tableau. une boule rouge, et la dernière (c'est-à-dire la 7ème) est rendue bleue.

Réponse

J'ai posé une question sur SegmentFault, adresse : vue attribut calculé exploité un tableau en même temps

J'ai adopté la réponse et changé le code en :

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

Le problème est que je n'ai pas compris que l'épissure allait changer le tableau d'origine.

Lorsque je cherchais une solution, mon ami Shaohui m'a appris une meilleure solution. Je suis très reconnaissant

c'est-à-dire le jugement du nom de classe <. 🎜>1. Si la taille du tableau est connue, faites un jugement sur le nom de classe et affichez le nom de classe en bleu si l'index est supérieur à l'index

2. 🎜>

3. Code ajouté :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

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

À propos de l'utilisation de datepicker dans vue2.0

Mode médiateur JavaScript (tutoriel détaillé)

Comment utiliser les éléments Dom dans jQuery ?

Comment résoudre le problème du désalignement de la barre de défilement niceScroll dans jQuery

Introduction détaillée aux points de connaissance sur les promesses en js

Comment supprimer un élément dans un tableau JS

Comment implémenter la connexion de recyclage automatique des transactions mysql dans Node.js

Utilisez Nginx dans vue.js pour résoudre des problèmes inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!