Vue.jsを用いた<li>のCSSについて

Question

Laravel5のbladeのフロントをvue.jsで構築しております。
下記のような<div>を2つずつ囲ってデザインを加えようと考えておりますが、良い方法ございますでしょうか。

            <ul>
                @forelse($results as $result)
                   <li>
                       <p><img src="{{ $result->original_path }}" /></p>
                   </li>
                @empty
                   <li>No Data</li>
                @endforelse
            </ul>

上記はループがかかっているため<li>が複数個出てきます。
これを2つずつ、3つずつといった任意の単位でClassを付与したく、どのような方法がBestかを考えております。<li>は必ず偶数個が吐き出されます。

Laravel5×Vue.jsでの実装を考えておりますが、Vue.jsに関しては全く知識が無く、CSSを操作する上で便利だといえなければ無理に使用頂かなくても構いません。

Answer 1

任意の倍数のliに「クラスを付与する」のが目的ではなく、「スタイルを適用」するのが目的であれば、
:nth-child() というセレクタを使うと簡単です。

例えば次のようなリストがあり、

<ul class="numbers">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
</ul>

次のようなCSSを適用すると、

ul.numbers li:nth-child(3) {
    color: red;
}

numbersをクラスに持つulのうち、3番目のliのテキストが赤くなります。(この場合three)
また、次のように書くと、

ul.numbers li:nth-child(3n) {
    color: red;
}

numbersをクラスに持つulのうち、3の倍数番目のliのテキストが赤くなります。(この場合three, six)
:nth-child()の詳しい使い方に関しては、調べてみてください。

Answer 2

うーん、Vue.jsを使うのであればv-forを使用するのならわかるのですが、テンプレートエンジンのループを使用するのであれば、Vue.jsを使用する意味がないような。
Vue.jsでclassを制御する場合は、computedを使用すればできると思います。
リファレンス