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

今回は、Vuejsの最初の項目にindexを使ってclassを追加するときのclassについてご紹介します。実際のケースを見てみましょう。

(1) v-for で、index を使用して class

を最初の項目に追加します CODE でコード スニペットを表示します。私のコード スニペットから派生します

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

Index は v-for から取得され、i は走査される array の要素を表し、index は index を表します。

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

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

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

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

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

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

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

推奨読書:

vue の post で null パラメーターを処理する方法

axios が post リクエストを送信する springMVC がパラメーターを受け入れられない場合の対処方法

。

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