Vue.js v-for中的Vue备用类

我有一个数组（历史记录），每次按下一个按钮，它都会被按下两项。这两个项目将需要有不同的css样式打印时

HTML

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

问题在于，在循环过程中，无法更改

切换的真实性。有更好的方法吗？
解决方案1：
您可以使用以下代码：

<ul class="info">
  <li v-for="item in history" :key="item"
      :class="{ 'style-one' : item.isPlayer, 'style-two' : !item.isPlayer }"
      >

   {{ item.text }}

  </li>
</ul>

methods: {
  attack: function() {
  this.history.unshift({ text: this.playerDamaged, isPlayer: true });
  this.history.unshift({ text: this.monsterDamaged, isPlayer: false });
}

.style-1{
颜色：蓝色；
}
.style-2{
颜色：红色；
}

{{item}}
做得很好。除了将对象传递到数组中之外，没有其他方法吗？是的，有其他方法（不需要对象）：请参阅更新的我的答案。感谢您花时间撰写本文。好消息！
<ul class="info">
  <li v-for="item in history" :key="item"
      :class="{ 'style-one' : item.isPlayer, 'style-two' : !item.isPlayer }"
      >

   {{ item.text }}

  </li>
</ul>

methods: {
  attack: function() {
  this.history.unshift({ text: this.playerDamaged, isPlayer: true });
  this.history.unshift({ text: this.monsterDamaged, isPlayer: false });
}

<ul class="info">
  <li v-for="(item, index) in history" :key="item"
      :class="'style-' + ((index % numberOfPlayers) + 1)"
      >

   {{ item }}

  </li>
</ul>

//This part don't have to deal with Array of Objects :
methods: {
  attack: function() {
  this.history.unshift( this.playerDamaged );
  this.history.unshift( this.monsterDamaged );
},
computed: {
    numberOfPlayers: function() {
        return 2;
    }
  }