参考にさせて頂いたページ
サンプルコード
以下のように書いてみました。
<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を結合して文字列にしています。