テーブルとかもそうですが、最初の要素だけスタイルを切り替えたい時にどうするんだろうと調べていたら3項演算子が使えました。
class属性を配列の要素番号で切り替える
sample.html
<style>
.first{
color: aquamarine;
}
.two-or-more{
color: burlywood;
}
</style>
<div id="app">
<ul>
<li v-for="(e,index) in mylist" v-bind:class="[index == 0 ? 'first' : 'two-or-more']">{{e.name}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
mylist: [
{ name: "1つ目" },
{ name: "2つ目" },
{ name: "3つ目" },
{ name: "4つ目" },
],
}
})
</script>
結果
参考
公式ドキュメント#配列構文
https://jp.vuejs.org/v2/guide/class-and-style.html#%E9%85%8D%E5%88%97%E6%A7%8B%E6%96%87