Index を使用して Vuejs を通じて v-for の最初の項目にクラスを追加する方法とその具体的な手順は何ですか?

以下に、v-for の Vuejs の最初の項目にインデックスを使用してクラスを追加する方法に関する記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。

(1) v-for で、index を使用して最初の項目にクラスを追加します

CODE でコード部分を表示します。私のコード部分から派生します

<a class="list-group-item" :class="{&#39;active&#39;:!index}" v-for="(i,index) in announcement">

index は v-for から来ています、 i は走査される配列の要素を表し、index はインデックスを表します。

インデックスは0から始まるので、最初の項目がアクティブなクラスを持つことを指定したい場合は、v-bind:class="{'active':!index}"を使用します

最初の項目は元々false(0) ) 、2 番目以降の項目は true (>0) であり、その値は論理 NOT 演算子によって反転されます。

したがって、最初の項目にはアクティブなクラスがありますが、次の項目にはアクティブなクラスがありません。

最初の項目以外に特定のクラスがある場合は、論理否定演算子を追加しないことでも実現できます。

同様に、index==2 のような式を使用して、3 番目の項目にこのクラスを取得させることができます。

注、私のバージョンはVuejs2.0なので、$indexで置き換えることはできないようです。

上記は私があなたのためにまとめたものです。

関連記事:

Angular Componentのソースコード例の分析

JSにおける元の値と参照値の格納方法の詳細例

数字を3桁でフォーマットするVueカスタムフィルターの実装プラス 1 カンマ コード

以上がIndex を使用して Vuejs を通じて v-for の最初の項目にクラスを追加する方法とその具体的な手順は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。