vue で v-for を使用して配列を処理する方法

この記事では主に、配列の処理時に vue 計算プロパティと v-for を実行するときに発生するバグの問題を紹介します。必要な友人は参照してください

問題

バグ: コンポーネント内で無限の更新ループが発生する可能性があります。レンダリング関数無限ループ

1. 処理対象の配列 (** ssq ** 内):

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

2. 計算された属性:

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

3. v-for コード:

<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.配列内の最初の 6 つの数値を赤いボールとしてレンダリングし、最後の数値 (つまり 7 番目の数値) を青としてレンダリングしたいと考えています。

答え

私はSegmentFaultで質問しました、アドレス：vueの計算された属性は同時に配列を操作します

私は答えを受け入れてコードを次のように変更しました：

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

問題は、どのようなスプライスなのか理解できなかったことです元の配列に変更を加えます。

解決策を探していたところ、友人のShaohuiさんがより良い解決策を教えてくれました

それは、クラス名判定です

1. 配列のサイズがわかっている場合は、クラス名を作成します。判断、インデックスがインデックスよりも大きい場合は、青色のクラス名を表示します。

2. 処理された HTML コード:

<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. 追加されたコード:

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

上記は、私が皆さんのためにコンパイルしたものです。将来的にはすべての人に役立ちます。

関連記事:

vue2.0でのdatepickerの使い方について

JavaScriptメディエーターモード(詳細チュートリアル)

jQueryでDom要素を使うには？

jQueryでniceScrollのスクロールバーがずれる問題を解決する方法

jsのPromiseに関する知識ポイントを詳しく紹介

JS配列の要素を削除する方法

Node.js mysql トランザクションの自動リサイクル接続を実装します

vue.js で Nginx を使用してクロスドメインの問題を解決します

以上がvue で v-for を使用して配列を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。