vue.js - v-for の Vue 代替クラス

Question

ボタンが押されるたびに 2 つの項目がプッシュされる配列 (履歴) があります。これら 2 つのアイテムは、印刷時に異なる CSS スタイルを持つ必要があります。

HTML

<ul class="info">
  <li :class="{ 'style-one' : toggle, 'style-two' : toggle }" v-for="item in history">{{item}}</li>
</ul>

JS (ビュー)

methods: {
  attack: function() {
  this.history.unshift(this.playerDamaged);
  this.history.unshift(this.monsterDamaged);
}

toggleこれに関する問題は、ループ中にの真実性を変更する方法がないことです。これにアプローチするより良い方法はありますか？