vue.js 2.x その0007 v-forのindexを使って連番のclassを付与する

参考にさせて頂いたページ

• vue.js, simple v-for / v-bind to add index to class name - Stack Overflow
• クラスとスタイルのバインディング - Vue.js

サンプルコード

以下のように書いてみました。

<div id="vue-app">
  <ul>
    <li v-for="(item, index) in items" v-bind:class="['hoge-' + index]">
      {{item}}
    </li>
  </ul>
</div>

<script src="js/vue.js"></script>
<script>
  new Vue({
    el: '#vue-app',
    data: {
      items: [
        'item-0',
        'item-1',
        'item-2',
      ]
    }
  });
</script>

サンプルコードについて

v-bind:classにはオブジェクト構文と配列構文があります。

今回のサンプルでは配列構文を使用しています。

公式ページの「クラスとスタイルのバインディング - Vue.js」の配列構文の項にはdata.activeClassに格納されている文字列を適用する方法と、三項演算子の判定結果を適用する例が書かれています。

配列構文では、この他に、文字列をreturnするmethodsの実行や、静的な文字列、文字列の結合などをカンマ区切りで入れることができるようです。

今回のサンプルコードでは'hoge-‘とindexを結合して文字列にしています。