この記事では主に、配列の処理時に 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="['tac','mr5','fl',index>5?'blue-ball':'red-ball']" >{{ item }}</em>3. 追加されたコード:
index>5?'blue-ball':'red-ball'
上記は、私が皆さんのためにコンパイルしたものです。将来的にはすべての人に役立ちます。
関連記事:
JavaScriptメディエーターモード(詳細チュートリアル)
jQueryでniceScrollのスクロールバーがずれる問題を解決する方法
Node.js mysql トランザクションの自動リサイクル接続を実装します
vue.js で Nginx を使用してクロスドメインの問題を解決します
以上がvue で v-for を使用して配列を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
