インデックスを使用して Vuejs の最初の項目にクラスを追加する方法

今回は、インデックスを使用してVuejsの最初の項目にクラスを追加する方法を説明します。インデックスを使用して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 から来ており、要素を意味します走査される array の、index は index を表します。

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

最初の項目は元々false(0) ) の場合、2 番目の項の後に true (>0) が続き、その値は論理否定演算子 によって反転されます。

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

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

同様に、index==2 のような

式 を使用して、3 番目の項目にこのクラスを取得させることができます。

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Web サイド アプリケーションはバック フォース リフレッシュを実装します

JS 画像処理と合成の詳細な説明

以上がインデックスを使用して Vuejs の最初の項目にクラスを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。